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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php变量作用域的深入解析
2013/06/03 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python for循环中的陷阱详解
2018/07/13 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python 内存管理机制全面分析
2021/01/16 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
土木工程专业推荐信
2014/02/19 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
员工安全承诺书
2014/05/22 职场文书
普通党员整改措施
2014/10/24 职场文书
放弃继承权公证书
2015/01/23 职场文书
教师求职自荐信范文
2015/03/04 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
培训心得体会怎么写
2016/01/25 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python