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注解