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 学习笔记 选择器之三
Jul 23 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
小程序实现多列选择器
Feb 15 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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
德生S2000电路分析
2021/03/02 无线电
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python3多线程操作简单示例
2018/05/22 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
python代码区分大小写吗
2020/06/17 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
回门宴父母答谢词
2014/01/26 职场文书
工程造价专业求职信
2014/07/17 职场文书
安全保证书格式
2015/02/28 职场文书
公司辞职信模板
2015/05/13 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
python_tkinter事件类型详情
2022/03/20 Python
深入理解pytorch库的dockerfile
2022/06/10 Python