ajax使用总结 一 Form提交与Payload提交

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

                    

后端处理前端提交的数据时，既可以使用Form解析，也可以使用JSON解析Payload字符串。

Form解析可以直接从Request对象中获取请求参数，这样对象转换与处理相对容易，但在大片JSON数据需要提交时，可能会出现大量的数据拆分与处理工作，另外针对集合类型的处理，也是其比较孱弱的地方。

而Payload的优势是一次可以提交大量JSON字符串，但无法从Request从获取参数，也会受限于JSON解析的深度（尤其是有多层对象级联的情况，最底层的对象几乎无法转换为具体类型）。

以Chrome浏览器为例，它们提交时的网络参数截图如下所示：

以下是Payload的提交方式：

具体到是实现上，$.ajax默认的实现方式就是Form提交，核心在于contentType的设置上，如下：

var data =  {    name : 'yiifaa'};//  提交数据$.ajax('app/', {    method:'POST',    //  将数据编码为表单模式    contentType:'application/x-www-form-urlencoded; charset=UTF-8',    //  数据必须为JS对象，不可是字符串    data : data,    success : function(datas) {        console.log(datas)    }})
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14

而Payload提交方式的实现如下：

$.ajax('app/', {    //  据我测试了多次，payload只能用于POST方式    method:'POST',    //  数据类型必须为application/x-www-form-urlencoded之外的类型    contentType:'application/json;charset=utf-8', charset=UTF-8',    //  数据必须转换为字符串    data : JSON.stringify(data),    success : function(datas) {        console.log(datas)    }})
  
1
2
3
4
5
6
7
8
9
10
11

结论

Form提交与Payload虽然都能提交数据，但它们的应用场景差异较大，需要准确理解它们的差异才是应用得当的前提。

           

浏览人工智能教程