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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
js Function类型
Dec 04 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
React服务端渲染原理解析与实践
Mar 04 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中调用JAVA
2006/10/09 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python_LDA实现方法详解
2017/10/25 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python中pyplot基础图标函数整理
2020/11/10 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
劳资人员岗位职责
2013/12/19 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年创卫工作总结
2014/11/24 职场文书
优秀教师单行材料
2014/12/16 职场文书
伏羲庙导游词
2015/02/09 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS