javascript代码实例教程-jQuery的AJAX跨域请求

发布时间:2018-12-31 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery的AJAX跨域请求脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

在项目中有时需要跨站点获取相关数据,而普通的ajax请求因为同策略影响无法直接访问,会产生跨域问题,这时候我们可以考虑使用jQuery的$.ajax(),$.getJSON()来完成跨域访问。

1. $.getJSON(url,[data],[callback])其中data可以卸载url后面也可以单独写在data中

1.1 $.getJSON("api.xxx.COM/servers/users?id=1&name=xiaoqiang&jsoncallback=?",function(data){

console.LOG(data)//data就是从服务器接口返回的json数据

})

1.2 $.getJSON("api.xxx.com/servers/users?jsoncallback=?",{"id":"1","name":"xiaoqiang"}function(data){

console.log(data)//data就是从服务器接口返回的json数据

})

2.$.ajax({.....})

2.1 $.ajax({

tyPE:"post",

url:"api.xxx.com/server/users",

data:{"id":1,"name":"xiaoqiang"},

async:true,//可以不写,默认就是true,就是异步请求的意思

dataType:"jsonp",

jsonp:callback,//默认就是callback,回调函数的参数名

jsonpCallback:";myCallback",//默认是jquery自动生成的随机函数名

success:function(data){

console.log(data)//这里就是从数据库获取的json数据了

}

})

我本来以为就这样就能够顺利的跨域请求获得服务器提供的接口的json数据了,其实不是的,服务器端的输出数据的格式必须符合jsonp格式,很多后端可能只是做的json格式的数据,不支持jsonp,这时候,你在控制台打印data,会提示“Uncaught SyntaxError: Unexpected token :”,

但是你点开这个报错,可以看到服务器返回的数据,但是就是无法console.log()出来,会一直报这个错误。所以可以让后端协助修改一下:

String jsonStr = "{/"name/":/"小强/",/"age/":28}";

//最终返回的数据为:myCallback({"name":"小强","age":28})

String renderStr = callbackName+"("+jsonStr+")";

response.setContentType("text/plain;charset=UTF-8");

response.getWrITer().write(renderStr);

服务端必须按照以上格式输出支持jsonp的数据,以上后端数据摘自:

https://www.duwaiweb.com/blog/20120918_e51195f8-2261-48CF-a883-3013a576fa51.htML

如果后端不肯改,那就只能用普通的请求方式+php curl来进行跨域请求了:

1.js代码如下,正常的请求,不带跨域功能

$('#BTn').click(function(){

let id=1;

let name="xiaoqiang";

$.ajax({

type:"post",

url:"data/user.php",

data:{"id":id,"name":name},

async:true,//可以不写,默认就是true,就是异步请求的意思

success:function(data){

let obj=JSON.parse(data);//json字符串转为json对象,这样好处理数据

console.log(obj)//这里获取的是请求操作成功还是失败的数据信息,比如@R_304_2358@us是否200

},

error:function(err){

console.log(err)//当请求出错是返回的数据

}

})

})

2.php代码,采用curl请求方式,代理请求,解决跨域问题

// 初始化一个 cURL 对象

$ch = curl_init();

// 设置cURL 参数

$id=$_REQUEST['id'];

$name=$_REQUEST['name'];

$str="?id=".$id."&name=".$name;

// 设置你需要抓取的URL

curl_setopt($ch, CURLOPT_URL,'https://,xxx.com/servers/users'.$str);

// 设置header 响应头是否输出

curl_setopt($ch, CURLOPT_HEADER,0);

// 1如果成功只将结果返回,0不自动输出任何内容。如果失败返回FALSE

curl_setopt($ch, CURLOPT_RETURNtransfer, 1);

// 运行cURL,请求网页

$data = curl_exec($ch);

// 关闭URL请求

curl_close($ch);

// 显示获得的数据

PRint_r($data);

?>

新手笔记,可能有些地方不对,多谢指正!

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery的AJAX跨域请求全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery的AJAX跨域请求所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。