用JQuery的$.getJSON发起跨域Ajax请求

jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数。原型如下:

jQuery.getJSON( url, [data], [callback] )  跨域加载JSON数据。伊川县第二中学

  • url:     发送请求的地址
  • data : (可选) 待发送key/value参数
  • callback: (可选) 载入成功时的回调函数

主要用于客户端获取服务器JSON数据。简单示例:

服务器脚本,返回JSON数据:

view source

print?

1 // $.getJSON.php
2 $arr=array("name"=>"zhangsan", "age"=>20);
3 $jarr=json_encode($arr);
4 echo $jarr;

注意两点:第一:在返回客户端之前,先用PHP函数json_encode将要返回的数据进行编码。第二:返回到客户端用的是echo,而不是return。

下面是核心的客户端代码:

view source

print?

01 <script language="javascript" type="text/javascript" src="./js/jquery.js"></script>
02 <script language="javascript" type="text/javascript">
03 function getjs()
04 {
05   $.getJSON("$.getJSON.php", {}, function(response){
06                  alert(response.age);
07   });
08 }
09  
10 <input type="button" name="btn" id="btn" value="test" onClick="javascript:getjs();"/>

由于在PHP中是用JSON编码返回值,所以此处必须用getJSON去调用PHP文件,从而获取数据。同时可以注意到,经由getJSON得到的数据已经变成了一个对象数组,可以用response.name,response.age很直观的获取返回值。

jquery提供了$.getJSON的方法,让我们可以实现跨域ajax请求,但jqueryAPI上的内容实在太少,如何用$.getJSON,请求网站应该返回怎样的数据库才能让$.getJSON获取到,下面我就用一个实际例子来说明下。

后端是用php的,以下代码主要实现的一个功能就是提供一个预约登记的接口,需要传入的数据分别有:用户姓名、联系电话和地址:

view source

print?

01 /*预约登记 执行 接口*/
02 case "yuyue_interface":
03     $name = trim($_GET[‘name‘]);
04     $phone = trim($_GET[‘phone‘]);
05     $addr = trim($_GET[‘addr‘]);
06     $dt = date("Y-m-d H:i:s");
07     $cb = $_GET[‘callback‘];
08     if($name == "" || $name == NULL){
09         echo $cb."({code:".json_encode(1)."})";
10     }elseif($phone == "" || $phone == NULL){
11         echo $cb."({code:".json_encode(2)."})";
12     }elseif($addr == "" || $addr == NULL){
13         echo $cb."({code:".json_encode(3)."})";
14     }else{
15         $db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values (‘$name‘,‘$phone‘,‘$addr‘,‘$dt‘,0)");
16         echo $cb."({code:".json_encode(0)."})";
17     }
18     exit;
19 break;

接着就是前端的处理了:

view source

print?

01 $(document).ready(function(){
02     //以下3个为预约登记需要的参数
03     var name = "name";      //varchar类型,长度最多为8位(4个汉字)
04     var phone = "phone";    //varchar类型,长度为11位
05     var addr = "addr";      //varchar类型,长度最多为500位(250个汉字)
06     $.getJSON("http://请求网站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){
07         if(data.code==1){
08             //自定义代码
09             alert("姓名不能为空");
10         }else if(data.code==2){
11             //自定义代码
12             alert("手机不能为空");
13         }else if(data.code==3){
14             //自定义代码
15             alert("所在单位不能为空");
16         }else{
17             //自定义代码
18             alert("预约成功");
19         }
20     });
21 });

需要注意的是,在后端php代码里,必须把传递进来的" &callback=? "也输出来,如:

view source

print?

1 $cb = $_GET[‘callback‘];
2 echo $cb."({code:".json_encode(4)."})";

以上就是一个简单的$.getJSON试验,通过这个试验,我们可以学到如何用$.getJSON,也能学到如何做一个接口让别人跨域请求。

时间: 2025-01-02 13:44:30

用JQuery的$.getJSON发起跨域Ajax请求的相关文章

jquery跨域Ajax请求

sonp原理: 首先在客户端注册一个callback, 然后把callback的名字传给服务器. 此时,服务器先生成 json 数据.然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端. 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定

跨域AJAX请求的解决方案

同源策略 : http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html 在AJAX应用环境中,由于安全的原因,浏览器不允许XMLHttpRequest组件请求跨域资源.在很多情况下,这个限制给我来带来的诸多不 便.很多同行,研究了各种各样的解决方案: 1. 通过修改document.domain和隐藏的IFrame来实现跨域请求.这种方案可能是最简单的一种跨域请求的方案,但是它同样是一种限制最大的方 案.首先,它只能实现在同一个

跨域AJAX请求

在处理跨域AJAX请求有许多方法.我这里用的是 CORS, CORSFilter CORSFilter是Apache官方提供一个支持CORS跨域的过滤器: 详细说明: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html 在maven配置文件中导入依赖 <!--CORS--> <dependency> <groupId>com.thetransactioncompany</groupId> &l

jQuery 利用 $.getJson() 实现跨域

数据量不大时,跨域的不二之选,而且操作简单,易上手. a.com/test.html //这里我假定有一些数据: var formData = form.serialize(); //这里的jsoncallback 是一个回调函数名 ,是必须的参数 //wrand保证每次请求不一样,兼容IE问题 var url = "http://www.xxx.com/fb/add?wrand="+Math.random()+formData+"&jsoncallback=?&qu

jQuery+ASP.NET MVC基于CORS实现带cookie的跨域ajax请求

这是今天遇到的一个实际问题,在这篇随笔中记录一下解决方法. ASP.NET Web API提供了CORS支持,但ASP.NET MVC默认不支持,需要自己动手实现.可以写一个用于实现CORS的ActionFilterAttribute,我们就是这么实现的: public class AllowCorsAttribute : ActionFilterAttribute { private string[] _domains; public AllowCorsAttribute(string dom

chrome实现全浏览器跨域ajax请求

如图,在chrome快捷方式上打开属性栏,在‘目标’栏加上后缀--disable-web-security --user-data-dir.即可实现在此浏览器上所有网页的跨域请求.

C#后台HttpWebRequest模拟跨域Ajax请求,注册Windows服务到服务器上

项目需求,暂且叫A.B公司吧.我们公司需要从A公司哪里读取机器上的数据,放到我们数据库中.然后再将数据库中存的数据,提供一个接口,B公司来调用,大概这个意思. 好了,言归正传.这个是之前做好的界面,用户需要手动点击“开始”,然后写了个定时器,不停的来回调用 部分源码(5秒调用后台处理) 1 function refreshCount() { 2 if (prj.is_port_state_1 == false) { 3 var grid_down = query_panel.grid_down;

JQuery的getJSON函数跨域

由于一开始看到“$”等类似符号就头晕,所以注定与PHP和JQuery无缘了,不过自己用JavaScript可不代表其他人也得用,这不,麻烦到了... 两个网站:A.B A站点提供了一个重要的API,由于种种原因,虽然是同一家公司,但原来的代码是不允许任何修改的,原来也没有考虑到后面有其他的站点需要调用: B站点的域名跟A完全不一样,但业务需要,必须拿到A站那个API的返回结果,并且为保证该API数据的准确性,必须是客户端去请求. 解决方法: API地址:http://domain.com:808

JSONP跨域 ajax请求

原理: 由于浏览器的同源策略不能使用XMLHTTPREQUEST对除本地外的服务器发送请求. 所以使用script标签的src属性发送请求,接收到的JSONP数据以函数名的方式返回. 需要在本地创建服务器返回的函数接收服务器返回的数据. JS代码: function jsonpRequest() { var create_src = document.createElement('srcipt'); #创建script标签 create_src.src = 'http://www.baidu.c