脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。