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 12 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP中“=&gt;
2019/03/01 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
python实现八大排序算法(2)
2017/09/14 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python 在局部变量域中执行代码
2020/08/07 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
会计与审计专业大专生求职信
2013/10/03 职场文书
教师实习自我鉴定
2013/12/13 职场文书
个人委托书
2014/07/31 职场文书
超市创意活动方案
2014/08/15 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
小学运动会通讯稿
2015/07/18 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书