原理：前端与后端的数据交互，最常用的就是GET、POST，比较常用的用法是：提交表单数据到后端，后端返回json
- 前端的数据发送与接收
1）提交表单数据
2）提交JSON数据 - 后端的数据接收与响应
1）接收GET请求数据
2）接收POST请求数据
3）响应请求
1、提交表单数据
1）GET请求
1 var data = { 2 ????"name": "test", 3 ????"age": 1 4 }; 5 $.ajax({ 6 ????type: ‘GET‘, 7 ????url: /your/url/, 8 ????data: data, ?// 最终会被转化为查询字符串跟在url后面： /your/url/?name=test&age=1 9 ????dataType: ‘json‘, ??// 注意：这里是指希望服务端返回json格式的数据10 ????success: function(data) { ??// 这里的data就是json格式的数据11 ????},12 ????error: function(xhr, type) {13 ????}14 });2）POST请求
1 var data = {} 2 // 如果页面并没有表单，只是input框，请求也只是发送这些值，那么可以直接获取放到data中 3 data[‘name‘] = $(‘#name‘).val() 4 ?5 // 如果页面有表单，那么可以利用jquery的serialize()方法获取表单的全部数据 6 data = $(‘#form1‘).serialize(); 7 ?8 $.ajax({ 9 ????type: ‘POST‘,10 ????url: /your/url/,11 ????data: data,12 ????dataType: ‘json‘, // 注意：这里是指希望服务端返回json格式的数据13 ????success: function(data) { // 这里的data就是json格式的数据14 ????},15 ????error: function(xhr, type) {16 ????}17 });【注意】
A）参数dataType：期望的服务器响应的数据类型，可以是null, xml, script, json
B）请求头中的Content-Tpye默认是
A）参数dataType：期望的服务器响应的数据类型，可以是null, xml, script, json
B）请求头中的Content-Tpye默认是
Content-Type:application/x-www-form-urlencoded ，所以参数会被编码为 name=xx&age=1 这种格式，提交到后端，后端会当作表单数据处理2、提交JSON数据
如果要给后端传递json数据，就需要增加content-type参数，告诉后端，传递过来的数据格式，并且需要将data转为字符串进行传递。实际上，服务端接收到后，发现是json格式，做的操作就是将字符串转为json对象。
另外，不转为字符串，即使加了content-type的参数，也默认会转成 name=xx&age=1，使后端无法获取正确的json
另外，不转为字符串，即使加了content-type的参数，也默认会转成 name=xx&age=1，使后端无法获取正确的json
1 // POST一个json数据 2 ?3 var data = { 4 ????“name”: "test", 5 ????"age", 1 6 } 7 $.ajax({ 8 ????type: ‘POST‘, 9 ????url: /your/url/,10 ????data: JSON.stringify(data), ???// 转化为字符串11 ????contentType: ‘application/json; charset=UTF-8‘,12 ????dataType: ‘json‘, ???// 注意：这里是指希望服务端返回json格式的数据13 ????success: function(data) { ??// 这里的data就是json格式的数据14 ????},15 ????error: function(xhr, type) {16 ????}17 });文章转载链接：https://www.jianshu.com/p/4350065bdffe （详细的后台数据接收与返回）
jQuery Ajax 前端和后端数据交互的问题
原文地址：https://www.cnblogs.com/miny-simp/p/9554612.html