通过jquery的$.getJSON自己做一个跨域ajax请求试验

简介:

 jquery提供了$.getJSON的方法,让我们可以实现跨域ajax请求,但jqueryAPI上的内容实在太少,如何用$.getJSON,请求网站应该返回怎样的数据库才能让$.getJSON获取到,下面我就用一个实际例子来说明下。(主要是留个备用,怕以后再用到自己却忘记了,所以没有太多的解释,实在看不明白的话,照着我的代码,你也试一个吧)

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

......
/*预约登记 执行 接口*/
case  "yuyue_interface" :
     $name  = trim( $_GET [ 'name' ]);
     $phone  = trim( $_GET [ 'phone' ]);
     $addr  = trim( $_GET [ 'addr' ]);
     $dt  = date ( "Y-m-d H:i:s" );
     $cb  = $_GET [ 'callback' ];
     if ( $name  == ""  || $name  == NULL){
         echo  $cb . "({code:" .json_encode(1). "})" ;
     } elseif ( $phone  == ""  || $phone  == NULL){
         echo  $cb . "({code:" .json_encode(2). "})" ;
     } elseif ( $addr  == ""  || $addr  == NULL){
         echo  $cb . "({code:" .json_encode(3). "})" ;
     } else {
         $db ->execute( "insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)" );
         echo  $cb . "({code:" .json_encode(0). "})" ;
     }
     exit ;
break ;
......

  接着就是前端的处理了

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

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

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

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

  如果有疑问,可以在下面提出来,如果我哪里写错了,也请帮我指出来。



   本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/05/03/2035074.html,如需转载请自行联系原作者


相关文章
|
4月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
2月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
3月前
|
XML JSON 前端开发
|
3月前
|
前端开发 JavaScript
|
3月前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
37 0
|
3月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
16 0
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
XML 前端开发 JavaScript
AJAX如何向服务器发送请求?
AJAX如何向服务器发送请求?
43 0
|
3月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
41 0