Jquery以及AngularJS中Get/Post的传参

这篇文章主要介绍了关于jquery以及angularjs中get/post的传参，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

传参并不是很难的事，但有时牵扯到例如要传一个对象或者form到后端的时候就会有些麻烦，在这里总结一些使用方法。

首先先介绍发送请求时我们经常会混淆的几个属性：
dataType: 期待服务器返回的数据格式
mimeType: 告诉说如何处理服务器返回的数据格式，这样browser就会进行相应的处理, 例如，设定类型为"Text/html"，那么client端就知道说，这是一个HTML的文档，我直接呈现出来就可以了；如果说是“Application/pdf”，那么client端就会知道说需要启动PDF阅读器插件去呈现内容。
contentType： 是指你所要发送的数据类型，例如“application/json;charset=utf-8”就是很常见的类型， 而“application/x-www-form-urlencoded; charset=UTF-8”是默认类型。

另外，比较一下Request Payload和Form的方式有何区别：
Request Payload需要设定Content-Type:application/json
在chrome developer tool里你会看到他传递的是一个Object/json，注意到里面还包含了数组，假如你是通过ajax提交的请求，浏览器只是显示出你通过Payload body提交的内容，浏览器并不知道资料是从哪里来的

Form形式的需要设定Content-Type: application/x-www-form-urlencoded 或者 Content-Type: multipart/form-data，通过developer tool看到的是这样的，这种情况下form-data就是Request payload，浏览器知道什么键对应什么值，所以他是以xx=xx的形式展现的，要注意的是，数组被转成了字串。

因此，当你需要传的资料仅仅是键值对，用Form的形式足以，如果需要传递的是复杂结构的（例如有嵌套的数组，对象），用RequestPayload比较合适。

接下来让我们比较一下各种传参情况~

第一种情况，传普通字串
JQuery:

let params = {
    a: 1,
    b: 2
}
// 第一种方法:
$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request?" + $.param(params)
})

//第二种方法:
$.ajax({
        "type": "GET",
        "url": "your_request",
        "data": params
})

AngularJS:

var conf = {
    method: 'GET',
    url: 'your_request',
    params: {
        a: 1,
        b: 2
    }
};

$http(conf).then(function(response){
    console.log(response.data);
}, function(){
    console.log("error");
}).finally(function(){
    console.log("finally");
});

第二种情况：Post form data
JQuery:

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": params
})

AngularJS:
注意data需要被转换成URL-encoded字串
ContentType需要设定为'application/x-www-form-urlencoded'指定传送的数据格式为Form

艾绘

艾绘：一站式绘本创作平台，AI智能绘本设计神器！

下载

var conf = {
    method: 'POST',
    url: 'your_request',
    data: $.param({
        c: 3,
        d: 4
    }),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
};

第三种情况：使用RequestPayload进行Post参数
JQuery:
设定contentType为“application/json”,并且将params序列化

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": JSON.stringify(params),
    "contentType": "application/json"
})

AngularJS:

var conf = {
    method: 'POST',
    url: 'your_request',
    data: {
        c: 3,
        d: 4
    }
};

有时，当服务器返回response是null，在火狐里会出现xml解析错误，是因为火狐默认使用xml解析服务器返回值，而遇到null返回值时，发生了解析错误。
在JQuery中可以通过设定mimeType来解决

$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request",
        "mimeType": "json"
})

在AngularJS中就比较难设定mimeType，参见：https://github.com/angular/an...

错误之处或者更多方案欢迎提出，谢谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

使用angularJs ng-repeat做表格合并行效果

ztree获取勾选节点数据并且与表单信息合并