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<String> 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<String> receiveJsonData(@RequestBody List<Employee> 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 注解