请求一览表
get 请求
使用 get 方法需要先知道你所要请求的数据是 JSON 类型还是 JSONP 类型 (JSON 是一种基于文本的数据交换方式 (不支持跨域), 而 JSONP 是一种非官方跨域数据交互协议.)
- JSON
- $(function () {
- var user = {
- "username": "HelloWorld"
- };
- $.Ajax({
- url: "http://localhost:8080/Changyou/UserInfo",
- type: "POST",
- contentType: "application/json; charset=utf-8",
- dataType: "json", //JSON 不支持跨域请求, 只能使用 JSONP
- data: {
- user: JSON.stringify(user)
- },
- success: function (data) {
- $("#user_name")[0].innerhtml = data.user_name;
- $("#user_teleNum")[0].innerHTML = data.user_teleNum;
- $("#user_ID")[0].innerHTML = data.user_ID;
- },
- error: function () {
- alert("请求超时错误!");
- }
- })
- });
开发过程中, 如果出现类似 "Origin ****** is not allowed by Access-Control-Allow-Origin." 的错误, 则可能是由于 JSON 数据不支持跨域导致的, 应考虑使用 JSONP 协议.
如果出现类似 "SyntaxError: Unexpected token':'. Parse error." 的错误, 则可能是由于返回的 JSON 数据没有用 "callback" 传递的函数名封装导致的.
- JSONP
- $(function () {
- var user = {
- "username": "HelloWorld"
- };
- $.Ajax({
- url: "http://localhost:8080/Changyou/UserInfo",
- type: "POST",
- contentType: "application/json; charset=utf-8",
- dataType: "jsonp", //JSON 不支持跨域请求, 只能使用 JSONP.dataType: 预期服务器返回的数据类型.
- data: {
- user: JSON.stringify(user)
- },
- JSONP: "callback", // 传递给请求处理程序或页面的, 用以获得 JSONP 回调函数名的参数名, 默认为 callback, 比如 {JSONP:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器.
- jsonpCallback: "userHandler", // 自定义的 JSONP 回调函数名称, 默认为 jQuery 自动生成的随机函数名, 也可以写 "?",jQuery 会自动为你处理数据
- success: function (data) {
- $("#user_name")[0].innerHTML = data.user_name;
- $("#user_teleNum")[0].innerHTML = data.user_teleNum;
- $("#user_ID")[0].innerHTML = data.user_ID;
- },
- error: function () {
- alert("请求超时错误!");
- }
- })
- });
get 请求另外的写法
- JSON
- $.get("http://datainfo.duapp.com/shopdata/getclass.php",
- function(data){
- console.log(data)
- }
- )
JSONP 两种: 对于 JSONP 这两种写法的区别就在于传递参数的方式, 第一种是直接在后面加? 然后写数据, 第二种是逗号隔开之后在大括号里写
- $.get("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",
- function(data){
- console.log(data)
- },
- "JSONP");
- $.get("http://datainfo.duapp.com/shopdata/getCar.php",
- {userID:"f66"},
- function(data){
- console.log(data)
- },
- "JSONP")
post 请求
JSONP 也有两种写法
- $.post("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",
- function(data){
- console.log(data)
- },
- "JSONP");
- $.post("http://datainfo.duapp.com/shopdata/getCar.php",
- {userID:"f66"},
- function(data){
- console.log(data)
- },
- "JSONP")
使用 Post 方式注意点
1. 设置 header 的 Context-Type 为 application/x-www-form-urlencode 确保服务器知道实体中有参数变量. 通常使用 XmlHttpRequest 对象的 SetRequestHeader("Context-Type","application/x-www- form-urlencoded;").
例:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2. 参数是名 / 值一一对应的键值对, 每对值用 & 号隔开. 如 name=abc&sex=man&age=18
3. 参数在 Send(参数) 方法中发送, 例: xmlHttp.send(data); 如果是 get 方式, 直接 xmlHttp.send(null);
4. 服务器端请求参数区分 Get 与 Post. 如果是 get 方式则 $username = $_GET["username"]; 如果是 post 方式, 则 $username = $_POST["username"];
Ajax 乱码问题
产生乱码的原因: 1,xtmlhttp 返回的数据默认的字符编码是 utf-8, 如果客户端页面是 gb2312 或者其它编码数据就会产生乱码
2,post 方法提交数据默认的字符编码是 utf-8, 如果服务器端是 gb2312 或其他编码数据就会产生乱码
解决办法有: 1, 若客户端是 gb2312 编码, 则在服务器指定输出流编码
2, 服务器端和客户端都使用 utf-8 编码
- gb2312:header('Content-Type:text/html;charset=GB2312');
- utf8:header('Content-Type:text/html;charset=utf-8');
参考文章:
JSON 和 JSONP 的使用区别 https://www.cnblogs.com/strugglion/p/5929821.html
jQuery 的 Ajax 详解 https://www.cnblogs.com/GoCircle/p/6530699.html
$.Ajax 设置的参数 key 参考文档: http://www.w3school.com.cn/jquery/ajax_ajax.asp
来源: http://www.bubuko.com/infodetail-2960649.html