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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 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内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
python求列表交集的方法汇总
2014/11/10 Python
python模块之StringIO使用示例
2015/04/08 Python
Python 12306抢火车票脚本
2018/02/07 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
计算机专业毕业生推荐信
2013/11/25 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
保护环境倡议书100字
2014/05/19 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
公司奖励通知
2015/04/21 职场文书
农业项目投资意向书
2015/05/09 职场文书