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 相关文章推荐
二级域名转向类
Nov 09 Javascript
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
详解javascript脚本何时会被执行
Feb 05 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
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
python基础之入门必看操作
2017/07/26 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
婚前协议书范本
2014/04/15 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
班级活动总结格式
2014/08/30 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
浅谈Vue的computed计算属性
2022/03/21 Vue.js