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 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
pandas值替换方法
2018/07/10 Python
python实现简单flappy bird
2018/12/24 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python 变量的创建过程详解
2019/09/02 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
python如何提升爬虫效率
2020/09/27 Python
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
电子专业求职信
2014/06/19 职场文书
语文教育专业求职信
2014/06/28 职场文书
新党章的学习心得体会
2014/11/07 职场文书
给学校的建议书400字
2015/09/14 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers