1. 程式人生 > >JavaWeb開發$.ajax如何向後臺傳輸資料

JavaWeb開發$.ajax如何向後臺傳輸資料

在Web開發中,前臺和後臺的資料互動是十分頻繁的, 而JQuery對Ajax進行了封裝,使得前臺向後臺傳送資料變得十分簡單。

假如後臺有一個Java類User,來接收並封裝資料

public class User{
    private Interger id;
    private String name;
    private String sex;
}

一、簡單的資料格式

$.ajax傳送資料的幾種形式

//1 直接在url中傳遞
$.ajax({
    type: "POST",
    url: "/testAjax/addUser?id=1&name=zhangxiaofan&sex=male"
, success:function(data){ //TODO } }) //2 html頁面from表單序列化 var formData = $("#form").serialize(); $.ajax({ type: "POST", url: "/testAjax/addUser", data: formData, success:function(data){ //TODO } }) //3 拼接data字串 var formData = $("#form").serialize(); $.ajax({ type: "POST"
, url: "/testAjax/addUser", data: "id=1&name=zhangxiaofan&sex=male", success:function(data){ //TODO } }) //4 簡單的js物件 var userData = { id:1, name:zhangxiaofan, sex:male } $.ajax({ type: "POST", url: "/testAjax/addUser", data: userData, //或者data:{id:1,name:zhangxiaofan,sex:male}
success:function(data){ //TODO } })

針對以上方式,後臺資料的獲取(SpringMvc框架)


@RequestMapping(value = "/testAjax")
public class UserController{
    // 1 將User放到引數中,框架進行封裝
    @RequestMapping(value = "/addUser")
    public String addUser(User user) {
        //TODO
    }

    // 2 自己獲取
    @RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request) {
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        String sex= request.getParameter("sex");
    }

}

二、複雜的資料格式

複雜的資料一般採用JSON格式來傳輸,並且Java對JSON格式的資料也都有很好的支援,如JSON-lib的JSONArray和JSONObject、jackson等技術。
注意: 前後臺傳輸的JSON資料一般是JSON物件序列化的字串,而不是直接傳遞JSON物件。

//1 JSON物件
var user = {id:1,name:"zhangxiaofan",sex:"male"};
//2 自己拼接JSON字串
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
//3 JSON.stringify(data) JS方法序列化JSON物件
var userStr = JSON.stringify(user);
//1 將JSON字串作為value值,後臺藉助JSON解析工具

var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';

$.ajax({
    type: "POST",
    url: "/testAjax/addUser",
    data: "user="+userStr ,
    success:function(data){  
        //TODO
    } 
})
//後臺程式碼
String json = request.getParameter("link");
JSONObject j = JSONObject.fromObject(json);
System.out.println(j.get("linkId"));

//2 結合SpringMvc的@RequestBody,@RequestBody需要把所有請求引數作為json解析,不能包含key=value這樣的寫法在請求url中,可以輕易的將一個物件或者陣列傳到Java端,使用@RequestBody即可繫結到物件或者List/陣列
//(1)物件
var user = {
    id:1,
    name:"zhangxiaofan",
    sex:"male"
}
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",  //需要設定contentType
    url: "/testAjax/addUser",
    data: JSON.stringify(user) ,
    success:function(data){  
        //TODO
    } 
})

//後臺
@RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request,@RequestBody User user) {

    }
//(2)陣列
var users=[];  
var user1={id:1,name:tom,sex:cat};  
var user2={id:2,name:tom2,sex:cat};  
users.push(user1);  
users.push(user2);  
 $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",  //需要設定contentType
    url: "/testAjax/addUser",
    data: JSON.stringify(users) ,
    success:function(data){  
        //TODO
    } 
})   

//後臺
@RequestMapping(value = "/addUser")
    public String addUser(HttpServletRequest request,@RequestBody List<User> user) {
    //上面也可以將List<User>改為User[]陣列
    }

相關推薦

JavaWeb開發$.ajax如何後臺傳輸資料

在Web開發中,前臺和後臺的資料互動是十分頻繁的, 而JQuery對Ajax進行了封裝,使得前臺向後臺傳送資料變得十分簡單。 假如後臺有一個Java類User,來接收並封裝資料 public class User{ private Interge

ajax動態接收後臺後臺傳輸資料以及接收資料

 ajax部分,接收後臺傳送的資料,要按照json格式將資料拼接好 unction save(){ var index = $("#index").val(); var id = $("#id").val(); var imgPath=$("#imgPath"

使用AJAX後臺資料,為什麼會進入error?

問題:用ajax向後臺傳值,正常是根據伺服器的響應來決定進入success或者進入error,但是隻要執行ajax,不等後臺響應,直接進入error;然而後臺接受資料正常; 解決方法:(不要對號入座) html: <button type="submit" cla

Modal模態框使用ajax後臺資料和檔案之modal複用

昨天把新增計劃概要寫完了,那麼今天要開始新增計劃了,經理開始催了,好急好急!!＀! 那麼新增計劃從哪裡開始呢,我們的前段已經編輯好了,像這樣的: OK,重點是天數,我們要先取到天數才行,那麼天數之前已經給出了,在第一頁上,我們直接用Jqu

通過ajax後臺資料 後臺處理完後返回資料ajax 提示找不到物件

今日坑,今日畢。明天還有新的坑。 問題: 通過ajax向後臺傳資料 後臺處理完後返回資料給ajax提示找不到物件。 大概是這樣的: 頁面: $.ajax({ url : url, data : data, type : "post", dataType : "json",

在Spring Security中使用AJAX後臺傳送資料

工作中遇到的問題,這裡記錄下,也希望能夠幫助同學們少走彎路 為了快速幫助快速解決問題,我決定首先呈現問題的表現,再進行分析 環境:spring 4.2.3   spring security 4.1.3 表現: 2016-10-26 22:44:02 [http-apr-9

mvc 前臺後臺傳輸資料

這幾天在學mvc,做個筆記,如有錯誤或者可以改進的地方請指教。VIew中name="course_name" 必填,否則json無法取到控制元件中的值。 <input name="course_name" data-options="prompt:'請輸入課程名稱'"

AJAX後臺傳遞資料(包括陣列)的方法

我是一個Java Web新手程式設計師,今天來總結一下用AJAX向後臺傳遞資料的寫法,如有問題歡迎指正。首先我們來重申一下在JQuery中封裝的AJAX的寫法(相對於原生js寫法):$.ajax({ type : "post", url : "Student_Ch

jsp用ajax後臺資料的格式

<script type="text/javascript"> $.ajax( { url: "test.action", async:true, cache:false, type:'post' dataType:'text', dat

JSP 頁面用 Ajax 後臺資料中文亂碼

1. Jsp 頁面對變數進行編碼encodeURI(encodeURI(smsContent.value)); 2. 後臺接收解析變數smsContent = URLDecoder.decode(URLDecoder.decode(smsContent, "UTF-8"),"

Django中使用ajax post後臺傳送資料時403 Forbidden (CSRF token missing or incorrect.):的解決辦法

在Django中使用ajax post向後臺傳送資料時會出現403 Forbidden (CSRF token missing or incorrect.): 的報錯。 第一種解決方法: 先看一下ajax的使用方法: $.ajax({ url: '{% url '

在使用ajax後臺傳送json資料,存在格式不正確的問題

在一次servlet伺服器的專案中,想在前臺使用json向後臺傳送請求,其中data的格式如下: var requestData = { "services": [{ "lightbulb" : [{"alpha":0}], "operat

使用jquery validate和ajax進行表單驗證並後臺提交資料

以前我都是在頁面中點選submit按鈕後提交給某個url一個post資料,使用validate後我們就可以使用html頁面和js來非同步的向後臺提交資料,具體程式碼如下 $("#form-product-add").validate({ rules : { tit

使用jq+ajax後臺提交select input中的資料

1、html程式碼 <span class="request" style="margin: 0px 0px 0px 8px;float: left;font-size: 17px;">

jquery.ajax()後臺傳遞陣列資料問題,java後臺無法接受

                                         jquery.ajax()向後臺傳遞陣列資料問題,java後臺無法接受                                                             

js如何陣列中新增物件並通過ajax後臺傳遞list資料

js動態向陣列新增物件,並通過ajax提交List資料到後臺 var data=[{name: '張三',age: 18,id: 1},{name: '李四',age: 22,id: 2}]; var test= []; for (var i = 0; i < data.le

ajax xmlhttprequest使用post傳引數並後臺獲取資料

         ajax xmlhttprequest向後臺傳資料有兩種方式,一種是直接在地址URL後面加入引數,後臺用Request.QueryString來獲取,另外一種是採用POST來傳,send方法傳送引數對,比如send("a=3&b=4"),後臺用Re

Ajax後臺發送數據

基於 src null ssa charset value test 3.2 form Ajax向後臺發送數據,三種情況: 1:Ajax手動發數據 #GET 發數據<div> <a class="btn" onclick="Ajax

js數組作為參數用ajax後臺傳參數

log list syn void 循環 var bsp function [] 1 /*前臺往後臺傳參數時,可以這樣寫*/ 2 var chessId = "123"; 3 var i=0; 4 5 var d

ajax後臺傳遞數組

nbsp clas 傳遞 接收 radi array div 數組接收 pre var ids = new Array(); ids.push(‘1‘); ids.push(‘2‘); $.ajax({ data:{ids:ids}, type:‘post