function dzxczx(d) {
console.log(d);
}
$('.btn').click(function() {
$.ajax({
url : 'https://www.baidu.com/',
type : 'GET',
dataType : "jsonp",
jsonp : "callback",
success : function (d) {
console.log(d);
},
})
})
请问通过jsonp跨域 出现的语法错误要怎么解决啊?
先搞懂啥是jsonp。。
什么是跨域,跨域就是浏览器为了安全而不让不同域名之间可以进行消息通信,例如:http://www.xxx1.com
不能与http://www.xxx2.com
进行通信,http://www.xxx.com:8080
不能与http://www.xxx.com:9090
进行通信。当然并不是完全不能跨域比如<a>
,<script>
,<link>
,<img>
,<iframe>
标签就能进行跨域,从其他域名网站中获取到数据。有时候我们异步到其他网站进行数据通信,这时候我们就能使用jsonp来解决,jsonp并不是什么特殊的技术,而是通过<script>
能够跨域的特性,发送数据到服务器,服务器处理完数据后,返回一段JavaScript代码,通过这段代码调用本地写好的回调函数。
跨域例子
前端代码
var jsonpBtn = document.getElementById('jsonBtn');
// 回调函数
var callback = function(text) {
alert(text);
};
jsonpBtn.onclick = function() {
// 创建script标签,用来解决跨域
var element = document.createElement('script');
element.setAttribute('type', 'text/javascript');
// 拼接URL
var url = 'http://xxx.com/jsonp.php?callback=callback&text=huang';
element.setAttribute('src', url);
// 将script标签添加到HTML页面中
// 这样就相当于再向http://xxx.com/jsonp.php?callback=callback&text=huang请求一段JavaScript代码
document.body.appendChild(element);
};
后端代码
<?php
// 接受数据和回调函数
$text = $_GET['text'];
$callback = $_GET['callback'];
// 拼接数据
$data = json_encode(['text' => $text]);
// 返回数据
// 这样就相当于返回了callback('huang');浏览器接受到后就执行这段JavaScript代码
echo "{$callback}({$data});";
结论
至于题主说的语法问题根本就不存在,至少JavaScript代码这边是没错的,出问题的是在服务器那边,浏览器通过script标签获取到了百度首页的所有HTML代码,由于不是JavaScript代码所以报了语法错误。
其他解决跨域的方式
利用xhr2新特性实现跨域
在HTML5中,AJAX的跨域有了新的规则,能否实现跨域取决于服务器的应答,服务器可以在响应的头信息中加上Access-Control-Allow-Origin这个header,它的值既可以是域名也可以是*(表示任意的域名)
使用反向代理
虽然浏览器有跨域的机制,但是后端却没有这个问题,我们可以ajax请求到同域下的接口,然后接口通过curl目标地址获取数据
只是jsonp对服务器返回的结果是有一定要求的。参考http://blog.csdn.net/alen1985...,写的浅显易懂。
同上的,jsonp的原理其实就是返回一个字符串,字符串中是一个函数。比如像这样:jsonp(){return /*这里就是服务器返回的真正的数据*/}
,再具体点就是这样 jsonp(){return "123";}
,然后你拿到这个字符串,要么把它加入到script标签中去,就能够在下面调用 var data = jsonp();
得到数据了。
最终原理是:ajax不能跨域,但是 script 标签中引用的地址能够跨域啊,通过这样间接获取数据(蛋疼)。如果会 后端语言(jsp、php、asp),就在后面写一个代理算了,感觉那样和谐点
请先搞清楚如何使用 ajax 跨域请求,不是随便一个 url 就能给你用的,再指出一个错误,dataType 并没有
'jsonp' 这个配置项。
jsonp跨域需要服务端返回类似
jsonCallback(data);
的数据,百度返回的是首页的html,jsonp无法解析,当然报错。
你这是jsonp请求,那你的回调呢?
先好好看看jsonp是什么然后回过头来再写
谢谢邀请。如楼上几位所说ajax
跨域jsonp
是需要有jsonpCallback
回调函数的。参考如下
$.ajax({
type: "get",
async: false,
url: "/app/actionInfo",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback: "receive",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(data) {
console.log(data.name);
},
error: function() {
console.log('fail');
}
});