jquery跨域请求示例分享(jquery发送ajax请求)


Posted in Javascript onMarch 25, 2014

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

jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。

url: 发送请求的地址
data : (可选) 待发送key/value参数
callback: (可选) 载入成功时的回调函数
主要用于客户端获取服务器JSON数据。简单示例:

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

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

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

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

<script language="javascript" type="text/javascript" src="./js/jquery.js"></script> 
<script language="javascript" type="text/javascript"> 
function getjs() 
{ 
  $.getJSON("$.getJSON.php", {}, function(response){ 
                 alert(response.age); 
  }); 
}<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的,以下代码主要实现的一个功能就是提供一个预约登记的接口,需要传入的数据分别有:用户姓名、联系电话和地址:

/*预约登记 执行 接口*/
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,也能学到如何做一个接口让别人跨域请求。
Javascript 相关文章推荐
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
jquery解析xml字符串示例分享
Mar 25 #Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
jquery默认校验规则整理
Mar 24 #Javascript
Javascript连接多个数组不用concat来解决
Mar 24 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php邮件发送的两种方式
2020/04/28 PHP
分享php多功能图片处理类
2016/05/15 PHP
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
在Python中使用Neo4j的方法
2019/03/14 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
公司企业表扬信
2014/01/11 职场文书
法学个人求职信范文
2014/01/27 职场文书
岗位竞聘书范文
2014/03/31 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
领导工作表现评语
2015/01/04 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书