ajax跨域终极解决办法
- jQuery
- 2024-07-23
- 245热度
- 0评论
在使用 ajax 的时候,往往需要通过 ajax 跨域请求一些?
但是 XMLHTTPRequest 是不支持跨域的,所以产生了 JSONP 这个东西来解决跨域,当然解决跨域的方式有很多种....
第一种解决跨域:
<script type='text/javascript' >
(function(window){
//AJAX获取界面信息
$(function(){
$.ajax({
// 豆瓣API接口
url:'http://api.douban.com/v2/movie/in_theaters?count=2',
dataType:"jsonp",
jsonp:"callback",
success:function(data){
console.log(data);
}
});
});
})(window);
</script>
这种解决跨域的方式,能够解决一些常规的业务逻辑,但是如果请求:天气的API接口就会有问题
url:'http://www.weather.com.cn/data/sk/101010100.html'
第二种解决跨域:
可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现:
<?php
header("content-type:text/html;charset=utf-8");
//php代理获取天气信息
//跨域请求
//天气预报接口
$url = "http://www.weather.com.cn/data/sk/101010100.html";
$cont = file_get_contents($url);
echo $cont;
?>
接下来使用 ajax 去请求本地的这个PHP文件即可:
<script type='text/javascript'>
$('input.submit').click(function(){
$.ajax({
url:"weather.php",
async:true,
success:function(result){
eval("var info="+result);
console.log(info['weatherinfo']['city']);
}
});
});
</script>
还有其他的方式来解决跨域,同样是通过JSONP的方式,我们可以自己编写JSONP文件,来解决跨域问题