通过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,如需转载请自行联系原作者


相关文章
|
2月前
|
XML 前端开发 JavaScript
|
24天前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
40 0
|
3月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
77 22
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
47 18
|
3月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
109 4
|
3月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
163 1
|
4月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
71 10
|
4月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
41 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
4月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
50 1
|
4月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。