AJAX常见提交数据的三种方式（Demo详解）

很开心你能来阅读，本章小结了ajax常见的传值方式，共同成长，一起进步。 1.关于ajax基础文章请参考：Ajax基础知识应用案例（Demo） 2.关于json相关知识请参考：json字符串的讲解 文章目录一、键值对方式提交二、提交JSON格式的字符串三、提交对象 一、键值对方式提交 AJAX提交 function submitData() { //1.获取需要提交的数据 var num = $(#num).val(); var name = $(#name).val(); ### AJAX常见提交数据的三种方式（Demo详解） #### 一、键值对方式提交 **AJAX提交** 在键值对方式提交数据时，我们通常会先获取表单中的各个字段值，然后通过Ajax的方式将这些值以键值对的形式提交给服务器。下面是一个具体的示例： ```javascript function submitData() { // 1. 获取需要提交的数据 var num = $("#num").val(); var name = $("#name").val(); var sex = $("#sex").val(); var age = $("#age").val(); // 2. 通过Ajax提交数据到“stu/add” $.post("stu/add", { // 使用jQuery的$.post方法 stuNum: num, stuName: name, stuSex: sex, stuAge: age }, function (data) { console.log(data); }, "json"); } ``` 在这个示例中，我们首先通过jQuery的选择器获取到了表单元素的值，然后使用`$.post`方法进行提交。这里需要注意的是，提交的数据是以键值对的形式组织的，即`{stuNum: num, stuName: name, ...}`这样的格式。 **控制器接收** 对于服务器端而言，可以采用两种方式来接收键值对形式的数据： 1. **属性接收** ```java @RequestMapping("stu/add") @ResponseBody public HashMap add(String stuNum, String stuName, String stuSex, int stuAge) { System.out.println(stuNum); System.out.println(stuName); System.out.println(stuSex); System.out.println(stuAge); HashMap map = new HashMap<>(); map.put("code", 1); return map; } ``` 这种方式适用于数据字段较少的情况，每个参数直接对应前端传递过来的键值对中的键。 2. **对象接收** ```java @RequestMapping("stu/add") @ResponseBody public HashMap add(Student stu) { System.out.println(stu); HashMap map = new HashMap<>(); map.put("code", 1); return map; } ``` 这种方式适用于数据字段较多或者数据结构较为复杂的情况。通过创建一个JavaBean类（如`Student`），然后使用该类的对象来接收前端传递过来的数据。 **小结** - 当提交的是键值对格式的数据时，可以在后端选择属性接收或对象接收的方式。 - 对象接收方式更加灵活，可以减少代码量并提高代码的可维护性。 #### 二、提交JSON格式的字符串 **AJAX提交** 当需要提交的数据满足JSON格式时，可以通过以下方式进行提交： ```javascript function submitData() { // 1. 获取需要提交的数据 var num = $("#num").val(); var name = $("#name").val(); var sex = $("#sex").val(); var age = $("#age").val(); var obj = {}; // 创建一个空对象 obj['stuNum'] = num; obj['stuName'] = name; obj['stuSex'] = sex; obj['stuAge'] = age; // 转换成JSON格式 var jsonStr = JSON.stringify(obj); $.ajax({ url: "stu/add", type: "POST", data: jsonStr, // 提交的JSON字符串 contentType: "application/json", // 设置内容类型为JSON success: function (data) { console.log(data); } }); } ``` **控制器接收** 为了正确解析这种格式的数据，后端需要做相应的配置： 1. **使用@RequestBody注解** ```java @RequestMapping("stu/add") @ResponseBody public HashMap add(@RequestBody Student stu) { System.out.println(stu); HashMap map = new HashMap<>(); map.put("code", 1); return map; } ``` - `@RequestBody`注解用于告知Spring框架将请求体中的内容（通常是JSON或XML）绑定到方法参数上。 - 当请求头中的`Content-Type`设置为`application/json`时，Spring会自动将请求体中的JSON数据绑定到Java对象上。 **小结** - 在前端使用`JSON.stringify()`方法将JavaScript对象转换为JSON字符串。 - 后端通过`@RequestBody`注解接收JSON格式的数据，并自动绑定到Java对象中。 无论是使用键值对还是JSON格式的数据提交方式，都需要根据实际需求合理选择提交与接收的方法。对于简单的表单提交，键值对方式较为直观；而对于复杂的业务逻辑，JSON格式则更为合适。此外，在实际开发过程中还需要考虑到数据的安全性和服务器端的处理效率等因素。