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脚本编程解决考试分数统计问题
Oct 18 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
javascript实现留言板功能
2020/02/08 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
python pandas 如何替换某列的一个值
2018/06/09 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python-numpy-指数分布实例详解
2019/12/07 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
银行职业规划书范文
2013/12/28 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
经典促销广告词大全
2014/03/19 职场文书
研究生导师评语
2014/12/31 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
Python&Matlab实现樱花的绘制
2022/04/07 Python