提交ajax表单提交方式,Ajax提交表单的方式

和提交一般表单一样发送数据

浏览器端代码

$("#ajaxform").click(function () {

//在咱们像提交表单一样发送数据时，不必把JSON对象转换为JSON字符串

var requestBody = {

"empId":999,

"empName":"harry",

"empSalary":128.56

};

$.ajax({

"url":"ajax/send/form/data.action", // 申请的指标地址

"type":"post", // 申请形式

"data":requestBody, // 申请体数据

"contentType":"application/x-www-form-urlencoded", //默认值，能够省略该项

"dataType":"json", // 服务器端返回数据的解析形式

"success":function(response) { // 服务器解决申请胜利，执行这个函数，响应体从参数这里传入

// response曾经解析为JSON对象，能够间接应用“.属性名”形式拜访具体属性

var result = response.result;

// 如果返回后果胜利，显示胜利(逻辑胜利)

if("SUCCESS" == result) {

alert("SUCCESS");

}

// 如果返回后果失败，显示音讯(逻辑失败)

if("FAILED" == result) {

var message = response.message;

alert(message);

}

},

"error":function(response){ // 解决申请失败，例如：404、500、400等等

alert(response);

}

});

});

应用开发者工具查看申请体

controller代码

@ResponseBody

@RequestMapping("/ajax/send/form/data")

public ResultEntity receiveFormData(Employee employee) {

System.out.println(employee);

return ResultEntity.successWithoutData();

}

整个申请体是一个JSON数据

浏览器端代码

$("#ajaxjson").click(function(){

// Ajax申请的申请体如果是JSON格局，那么须要先将数据封装为JSON对象

var jsonObj = [

{

"empId":666,

"empName":"jerry",

"empSalary":123.321

},

{

"empId":555,

"empName":"bob",

"empSalary":456.654

},

{

"empId":444,

"empName":"kate",

"empSalary":666.666

}

];

// 将JSON对象转换为JSON字符串

var requestBody = JSON.stringify(jsonObj);

// 发送Ajax申请

$.ajax({

"url":"ajax/send/json/data.action", // 申请的指标地址

"type":"post", // 申请形式

"data":requestBody, // 申请体数据

"contentType":"application/json;charset=UTF-8", //非默认值，不能省略

"dataType":"json", // 服务器端返回数据的解析形式

"success":function(response) { // 服务器解决申请胜利，执行这个函数，响应体从参数这里传入

// response曾经解析为JSON对象，能够间接应用“.属性名”形式拜访具体属性

var result = response.result;

// 如果返回后果胜利，显示胜利(逻辑胜利)

if("SUCCESS" == result) {

alert("SUCCESS");

}

// 如果返回后果失败，显示音讯(逻辑失败)

if("FAILED" == result) {

var message = response.message;

alert(message);

}

},

"error":function(response){ // 解决申请失败，例如：404、500、400等等

alert(response);

}

});

});

应用开发者工具查看申请体

Controller代码

@ResponseBody

@RequestMapping("/ajax/send/json/data")

public ResultEntity receiveJsonData(@RequestBody List empList) {

for (Employee employee : empList) {

System.out.println(employee);

}

return ResultEntity.successWithoutData();

}

小结

应用JSON格局作为申请体去传送数据，非常适合发送结构复杂的大对象数据。JSON格局和Java类型间接对应，不须要额定封装专门接管申请参数的实体类。

应用时须要留神的点：

JSON对象须要应用JSON.stringify()转换为JSON字符串

contentType要设置成application/json;charset=UTF-8

Controller办法接管应用Java类型形参前须要应用@RequestBody注解