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实现心算练习代码
Dec 06 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
javascript date格式化示例
Sep 25 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
vue组件实例解析
Jan 10 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
Vue如何使用混合Mixins和插件开发详解
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
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
php函数式编程简单示例
2019/08/08 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
浅谈Python中的数据类型
2015/05/05 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python plotly画柱状图代码实例
2019/12/13 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
基层党建工作宣传标语
2014/06/24 职场文书
党的群众路线调研报告
2014/11/03 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript