ajax通讯之格式详解

Posted 2020-08-17 李佳骏

前言：

ajax的出现，一定程度上改变了js的命运，同时也被广泛使用，而jq的兴起也大大降低了ajax的使用难度。虽然，jq的ajax方法使用起来十分便利，但是大部分开发人员也仅仅只是对其中的几个属性比较熟悉，当然也包括我。其中用的最多的是url、data、dataType、type、success、error和complete这几个，完整的代码格式如下：

$.ajax({

　　url: ‘/ajax/getInfo‘,

　　type: ‘GET‘, //或POST

　　data: { name: ‘jack‘ },

　　dataType: ‘json‘,

　　success: function(d){},

　　error: function(e){},

　　complete: function(){}

});

这里我就不一一赘述上面每个属性的意思了，不知道的可以查询jq的API。

在大部分情况下基本上是不会出问题的，但是遇到一些特殊情况时，后台常常拿不到数据，这是为什么呢？

正文：

首先，我们修改一下传输到后台的数据格式

$.ajax({

　　url: ‘/ajax/getInfo‘,

　　type: ‘POST‘, //这里以POST为例，GET请求的接收方式各不相同所以这里不进行讨论

　　data: {

　　　　name: ‘jack‘ ,

　　　　friends: [{

　　　　　　name: ‘rose‘,

　　　　　　sex: ‘female‘

　　　　},{　

　　　　　　name: ‘lily‘,

　　　　　　sex: ‘female‘

　　　　}]

　　},

　　dataType: ‘json‘,

　　success: function(d){},

　　error: function(e){},

　　complete: function(){}

});

以下说明完全是基于使用框架的接收方式，不涉及自己编写的接收器（如果完全是自己手动编写代码接收的话任意格式数据均能接收）。

如果是以上形式的数据格式（这里我们将其称为“复杂数据格式”）在JAVA的Spring MVC框架中是无法接收的，同样Nodejs的Express框架也无法接收。

既然以上的复杂数据格式无法接收，那么我们就需要找到一种能够正确接收的方式。

经过查阅网上的资料我发现将json数据转换成json字符串，并且在ajax的配置项中加入contentType即可，如下：

var sendData = 

{

　　name: ‘jack‘ ,

　　friends: [{

　　　　name: ‘rose‘,

　　　　sex: ‘female‘

　　},{　

　　　　name: ‘lily‘,

　　　　sex: ‘female‘

　　}]

};

$.ajax({

　　url: ‘/ajax/getInfo‘,

　　type: ‘POST‘, //这里以POST为例，GET请求的接收方式各不相同所以这里不进行讨论

　　data: JSON.stringify(sendData),

　　contentType: "application/json;charset=utf-8", //默认的contentType为application/x-www-form-urlencoded; charset=utf-8

　　dataType: ‘json‘,

　　success: function(d){},

　　error: function(e){},

　　complete: function(){}

});

总结：

如果使用简单的json格式进行POST请求时，我们不需要做什么特殊处理，但是如果要将复杂数据格式传给后台时，我们必须将数据转换成字符串，然后ajax配置项中加入contentType: "application/json;charset=utf-8"。