原理:前端与后端的数据交互,最常用的就是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 });
3、前端向后端传数据的方法
1)通过url路径传递参数
1 var id = 5; 2 boolean flag = false; 3 4 /**重点:ajax只需要type和url属性*/ 5 $.ajax({ 6 async: false, 7 cache: false, 8 type: 'POST', 9 url: 'area/delete/' + flag + '/' + id, //(1)请求的action路径,可以传递参数到后台 10 error: function() { 11 alert('请求失败 '); 12 }, 13 success: function(data) { 14 alert(data); 15 } 16 });
2)通过Ajax.data属性
1 var postData = { //(2)传递参数到后台,注意后台接收方式 2 "param1": "param1", 3 "areaId": 2, 4 "deleteId": 3, 5 "ids": "254,249,248" 6 /**重点:ajax的type,url,dataType,data属性*/ 7 $.ajax({ 8 async: false, 9 cache: false, 10 type: 'POST', 11 url: 'area/delete', 12 dataType: "json", 13 data: postData, 14 error: function() { 15 alert('请求失败 '); 16 }, 17 success: function(data) { 18 alert(data); 19 } 20 21 });
3)通过Ajax.data属性传递多个参数
1 //第一步:定义json格式数据 2 var postData = { 3 "param1": "param1", 4 "areaId": 2, 5 "deleteId": 3 6 }; 7 /**ajax的type,url,dataType,contentType,data属性*/ 8 $.ajax({ 9 async: false, 10 cache: false, 11 type: 'POST', 12 url: 'area/delete', 13 dataType: "json", 14 contentType: 'application/json', //第二步:定义格式 15 data: JSON.stringify(postData), //第二步;把json转为String传递给后台 16 error: function() { 17 alert('请求失败 '); 18 }, 19 success: function(data) { 20 alert(data); 21 } 22 });
文章转载链接:
① https://www.jianshu.com/p/4350065bdffe (详细的后台数据接收与返回)
② https://blog.csdn.net/dreamstar613/article/details/61912717 (js 和 java 的代码解释)