jQuery Ajax 前端和后端数据交互的问题

别来无恙 提交于 2020-03-12 07:44:33

原理:前端与后端的数据交互,最常用的就是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默认是 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
 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 的代码解释)
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!