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 Study Notes 学习笔记(一)
Aug 04 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 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
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
thinkphp缓存技术详解
2014/12/09 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
简单了解JS打开url的方法
2020/02/21 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python GUI布局尺寸适配方法
2018/10/11 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
标准毕业生自荐信
2014/06/24 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
网络研修随笔感言
2015/11/18 职场文书