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 相关文章推荐
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 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程序之die调试法 快速解决错误
2009/09/17 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
DEFER怎么用?
2006/07/01 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python 将md5转为16字节的方法
2018/05/29 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
高中军训第一天感言
2014/03/06 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
意向协议书
2015/01/27 职场文书
自荐信格式范文
2015/03/04 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python