Ajax提交表单的方式

64次阅读

共计 2231 个字符,预计需要花费 6 分钟才能阅读完成。

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

浏览器端代码

$("#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 注解

正文完
 0