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

原理：前端与后端的数据交互，最常用的就是GET、POST，比较常用的用法是：提交表单数据到后端，后端返回json

• 前端的数据发送与接收
  1）提交表单数据
  2）提交JSON数据
• 后端的数据接收与响应
  1）接收GET请求数据
  2）接收POST请求数据
  3）响应请求

1、提交表单数据

    1）GET请求

var data = {
    "name": "test",
    "age": 1
};
$.ajax({
    type: 'GET',
    url: /your/url/,
    data: data,  // 最终会被转化为查询字符串跟在url后面： /your/url/?name=test&age=1
    dataType: 'json',   // 注意：这里是指希望服务端返回json格式的数据
    success: function(data) {   // 这里的data就是json格式的数据
    },
    error: function(xhr, type) {
    }
});

    2）POST请求

var data = {}
// 如果页面并没有表单，只是input框，请求也只是发送这些值，那么可以直接获取放到data中
data['name'] = $('#name').val()

// 如果页面有表单，那么可以利用jquery的serialize()方法获取表单的全部数据
data = $('#form1').serialize();

$.ajax({
    type: 'POST',
    url: /your/url/,
    data: data,
    dataType: 'json', // 注意：这里是指希望服务端返回json格式的数据
    success: function(data) { // 这里的data就是json格式的数据
    },
    error: function(xhr, type) {
    }
});

【注意】
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

// POST一个json数据

var data = {
    “name”: "test",
    "age", 1
}
$.ajax({
    type: 'POST',
    url: /your/url/,
    data: JSON.stringify(data),    // 转化为字符串
    contentType: 'application/json; charset=UTF-8',
    dataType: 'json',    // 注意：这里是指希望服务端返回json格式的数据
    success: function(data) {   // 这里的data就是json格式的数据
    },
    error: function(xhr, type) {
    }
});

3、前端向后端传数据的方法

   1）通过url路径传递参数

var id = 5;
boolean flag = false;

/**重点：ajax只需要type和url属性*/
$.ajax({
    async: false,
    cache: false,
    type: 'POST',
    url: 'area/delete/' + flag + '/' + id, //（1）请求的action路径,可以传递参数到后台
    error: function() {
        alert('请求失败 ');
    },
    success: function(data) {
        alert(data);
    }
});

   2）通过Ajax.data属性

var postData = { //（2）传递参数到后台，注意后台接收方式 
        "param1": "param1",
        "areaId": 2,
        "deleteId": 3,
        "ids": "254,249,248"
        /**重点：ajax的type,url,dataType,data属性*/
        $.ajax({
            async: false,
            cache: false,
            type: 'POST',
            url: 'area/delete',
            dataType: "json",
            data: postData,
            error: function() {
                alert('请求失败 ');
            },
            success: function(data) {
                alert(data);
            }

        });

   3）通过Ajax.data属性传递多个参数

//第一步：定义json格式数据
var postData = {
    "param1": "param1",
    "areaId": 2,
    "deleteId": 3
};
/**ajax的type,url,dataType,contentType,data属性*/
$.ajax({
    async: false,
    cache: false,
    type: 'POST',
    url: 'area/delete',
    dataType: "json",
    contentType: 'application/json', //第二步：定义格式
    data: JSON.stringify(postData), //第二步；把json转为String传递给后台
    error: function() {
        alert('请求失败 ');
    },
    success: function(data) {
        alert(data);
    }
});

 

文章转载链接：

① https://www.jianshu.com/p/4350065bdffe （详细的后台数据接收与返回）

② https://blog.csdn.net/dreamstar613/article/details/61912717 （js 和 java 的代码解释）