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 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
怎么使 Mysql 数据同步
2006/10/09 PHP
如何分别全角和半角以避免乱码
2006/10/09 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python Web编程之WSGI协议简介
2018/07/18 Python
Django之模板层的实现代码
2019/09/09 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
个性与发展自我评价
2014/02/11 职场文书
人事文员岗位职责
2014/02/16 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
小学安全汇报材料
2014/08/14 职场文书
电影地道战观后感
2015/06/04 职场文书
导游词之太湖
2019/10/08 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Go 语言结构实例分析
2021/07/04 Golang