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

转载 2017年10月13日 14:40:13

这篇文章主要介绍了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 。




Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

Ajax和getJSON获取后台普通Json数据和层级Json数据解析 $(function () { //方式一 Ajax方式获取Json...
  • smartsmile2012
  • smartsmile2012
  • 2013年12月14日 10:56
  • 24127

解决ajax跨域访问 JQuery 的跨域方法

  JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点;有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQU...
  • e3002
  • e3002
  • 2010年05月21日 10:49
  • 12078

【jQuery】使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery.getJSON(url,[data],[cal...
  • happyhaojie
  • happyhaojie
  • 2015年12月18日 05:37
  • 957

jquery, highcharts, Ajax读取json数据

highcharts结合jquery和ajax的方法读取和展现json数据。先上代码和结果。 首先,给出相关的data.json文件中的json数据:{ "success": true, "...
  • lcxlxm
  • lcxlxm
  • 2016年11月28日 16:06
  • 949

JQUERY 实现AJAX跨域获取json数据实例

在项目中有时需要跨站点获取相关数据,使用ajax如何实现跨域获取json数据。 Jquery有封装好的实现方法,可以直接使用$.ajax()方法实现,只需要设置jsonp格式等相关变量即可;也可以使...
  • shuanzia
  • shuanzia
  • 2014年12月22日 16:03
  • 5367

jquery.getJSON跨域方案实现原理

jquery.getJSON在实现与后台程序异步交互方面非常的方便,在不牵扯跨域的情况下,实现也很简单。 使用方法为: $.getJSON('http://***.**/test/test.php...
  • xiaoxigua666
  • xiaoxigua666
  • 2016年05月20日 14:42
  • 460

ajax跨域getjsonp

最近研究了一下ajax跨域传输的问题,ajax跨域有两种方式,一种就是按getjsonp得方式,另一种就是post传输。 先来说一下getjsonp传输吧,getjsonp传输最重要的就是以下几点:...
  • star_hacker
  • star_hacker
  • 2016年07月03日 08:26
  • 1009

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,...
  • liuzp111
  • liuzp111
  • 2014年05月29日 14:06
  • 1604

jQuery ajax读取本地json文件以及跨域问题

jQuery ajax读取本地json文件以及跨域问题作为一名前端,当我们想要动态异步加载数据的时候总找不到后台数据,这时我们可以自己建一个json文件用来异步操作。1. data.json文件{ ...
  • YIDBoy
  • YIDBoy
  • 2017年02月26日 21:18
  • 5197

Jsonp实现Ajax跨域Demo

关于JSONP1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;   2、不过我们又发现,Web页面...
  • u013945518
  • u013945518
  • 2015年09月21日 10:17
  • 1746
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
举报原因:
原因补充:

(最多只允许输入30个字)