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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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中的MVC模式运用技巧
2007/05/03 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
pycharm导入源码的具体步骤
2020/08/04 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
大学活动总结格式
2014/04/29 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
三行辞职书范文
2015/02/26 职场文书
董存瑞观后感
2015/06/11 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
月考总结与反思
2015/10/22 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
详解Python中__new__方法的作用
2022/03/31 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python