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学习笔记(五)正则表达式
Apr 08 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
大学生实习证明范本
2014/01/15 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
街道务虚会发言材料
2014/10/20 职场文书
铁路安全反思材料
2014/12/24 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
八年级历史教学反思
2016/02/19 职场文书
学者《孟子》名人名言
2019/08/09 职场文书