JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

转载  更新时间:2017年09月23日 13:49:59   作者:webkaka   我要评论

这篇文章主要介绍了JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码,需要的朋友可以参考下

通过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 。

相关文章

  • JSON 入门指南 想了解json的朋友可以看下

    JSON 入门指南 想了解json的朋友可以看下

    JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式,并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。
    2009-08-08
  • javascript JSON操作入门实例

    javascript JSON操作入门实例

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
    2010-04-04
  • JSON 学习之JSON in JavaScript详细使用说明

    JSON 学习之JSON in JavaScript详细使用说明

    只需要在前台页面中引入相应的javascript即可测试
    2010-02-02
  • 将List对象列表转换成JSON格式的类实现方法

    将List对象列表转换成JSON格式的类实现方法

    下面小编就为大家带来一篇将List对象列表转换成JSON格式的类实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Chrome中JSON.parse的特殊实现

    Chrome中JSON.parse的特殊实现

    ECMA 262 Edition5 中提供了原生的JSON支持,其中JSON.parse用来将字符串转成成json,见ECMA 262 Edition5 15.12.2。另见:字符串转换成json的三种方式
    2011-01-01
  • jQuery 遍历json数组的实现代码

    jQuery 遍历json数组的实现代码

    看到网上有很多朋友问遍历json数组的代码,脚本之家特为大家整理了一些,需要的朋友可以看下。
    2010-03-03
  • 说说JSON和JSONP 也许你会豁然开朗

    说说JSON和JSONP 也许你会豁然开朗

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决
    2012-09-09
  • nodejs教程 安装express及配置app.js文件的详细步骤

    nodejs教程 安装express及配置app.js文件的详细步骤

    express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板。下面简单来说说express的安装和app.js文件的配置,然后在今后的教程中一步一步使用express.js搭建个聊天室
    2013-05-05
  • 半个小时学json(json传递示例)

    半个小时学json(json传递示例)

    这篇文章主要介绍了半个小时学json(json传递示例),主要包括一维数组与二维数组,需要的朋友可以参考下
    2016-12-12
  • json简单介绍

    json简单介绍

    我们知道AJAX技术能够使得每一次请求更加迅捷,对于每一次请求返回的不是整个页面,也仅仅是所需要返回的数据。
    2008-06-06

最新评论