通过JQuery可以跨域获取JSON数据,但必须弄清楚的是,JQuery不可以跨域获取任意JSON格式的数据,必须要通过服务端输出特定的针对JQuery跨域读取的JSON数据。你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍这个技术,相信人人都容易读懂,并能够实际应用。
JQuery获取同域的JSON数据
首先引用jQuery库文件:
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js">
</script>
jQuery代码:
var url="http://localhost:8000/user.php";
$(function()
{
$.getJSON(url,function(data)
{ alert (data.name);})
});
服务器代码(PHP):
<?php header('Content-Type:text/html;Charset=utf-8');
$arr = array(
"name" => "xiaoming",
"pass" => "123456"
);
echo json_encode($arr);
?>
服务器返回字符串:
{"name":"xiaoming","pass":123456}
JQuery获取跨域的JSON数据
首先引用jQuery库文件:
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js">
</script>
jQuery代码:
var url="http://localhost:8000/user.php?jsoncallback=?";
$(function(){
$.getJSON(url,function(data){
alert (data.name);
})
});
服务器代码(PHP):
<?php header('Content-Type:text/html;Charset=utf-8');
$arr = array(
"name" => "xiaoming",
"pass" => "123456");
echo $_GET['jsoncallback']."(".json_encode($arr).")";
?>
服务器返回字符串(需要传入参数“jsoncallback”):
jQuery19003894091040769696_1505708469340({"name":"xiaoming","pass":123456})
说明,jQuery传入值每次都不一样。
JQuery获取同域和跨域JSON数据的区别
从上述两个例子看到,JQuery获取同域和跨域JSON数据的区别有两点:
1)jQuery写法不同,跨域时要多加一个参数“jsoncallback=?”
2)服务器端返回字符串的写法不同,跨域时需要用到“'jsoncallback'”的传入值,构造的字符串格式是:jsoncallback传入值(原JSON字符串),注意要用括号把原JSON字符串包住。
总结
通过本文介绍,大家都应该明白了,要jQuery跨域读取JSON数据,首先需要在服务器端构造一个特殊的JSON字符串,否则是读取不了的,好在,构造方法十分简单,文中例子一看便懂。
jQuery + Ajax 获得跨域JSON数据
前面的例子用的是 $.getJSON 来获得跨域JSON数据,其实我们用 $.ajax 的方法也同样可以的。
首先引用jQuery库文件:
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js">
</script>
jQuery代码:
<script type="text/javascript">
$(function(){
$.ajax({
type: 'get',
url: 'http://localhost:8000/user.php?jsoncallback=?', dataType: 'jsonp',
jsonp: "jsoncallback",
success: function(data) {
alert("用户名:"+ data.name+" 密码:"+ data.pass);
}
});
}) </script>
特别注意,dataType 是 jsonp 而不是 json 。
分享到:
相关推荐
原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。 url: 发送请求的地址 data : (可选) 待发送key/value参数 callback: (可选) 载入成功时的回调函数 主要用于客户端获取服务器JSON数据。...
本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法。分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为’jsonp’ $.ajax({ dataType: 'jsonp', url: '...
浏览器安全上做了限制,禁止ajax跨域获得数据,可以通过jquery提供的$.getJSON()可以跨域获得JSON格式的数据,具体的实现如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
jquery提供了$.getJSON的方法,让我们可以实现跨域ajax请求,但jqueryAPI上的内容实在太少,如何用$.getJSON,请求网站应该返回怎样的数据库才能让$.getJSON获取到,下面我就用一个实际例子来说明下。
jquery的ajax和getJson跨域.docxjquery的ajax和getJson跨域.docx
本文实例讲述了jquery ajax结合thinkphp的getjson实现跨域的方法。分享给大家供大家参考,具体如下: jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果...
主要从三方面来通过jsonp来实现ajax跨域问题: 1.javascript方法 2.jquery $.ajax方法 3.jquery $.getJSON方法 不看会后悔的!
本篇文章主要是对jquery的ajax和getJson跨域获取json数据的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
jsonp 解决的是跨域 ajax 调用...今天,发现 jsonp 的另外一个限制(在jquery ajax的场景下) —— 不会触发 $.ajax 的error callback,示例代码如下: 代码如下:$.ajax({ dataType: ‘jsonp’, error: function (xh
所以我猜是跨域问题,马上就去google搜索了一下jquery跨域的解决,是用$.getJSON这个方法,但是我测试了许久,还是不行,继续找,还是没能找到。于是沉下心来,自己想:现在就是我可以通过那个远程的方法在浏览器中...
都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了很多种方法,使用$.ajax() 无论是get或post方法都会引起uri deny的错误。一番GG之后发现了解决方法,也了解其中的原因。 jquery从1.2开始,.getJSON...
jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。 url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据。简单示例: ...
我们都知道,AJAX的一大限制是不允许跨域请求。... jQuery的JSONPjQuery.getJSON方法:Js代码 代码如下:jQuery.getJSON(“http://search.twitter.com/search.json?callback=?”,{ q: “Arsenal” },functio
一般跨域用到的两个方法为:$.ajax 和$.getJSON 最后,仔细安静下来,细读 json 官方文档后发现这么一段: JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同...