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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
js实现无缝轮播图特效
May 09 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP脚本的10个技巧(2)
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP安全性漫谈
2012/06/28 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python监控文件并且发送告警邮件
2018/06/21 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
keras实现多种分类网络的方式
2020/06/11 Python
Python Http请求json解析库用法解析
2020/11/28 Python
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
汽车销售顾问求职自荐信
2014/01/01 职场文书
项目合作计划书
2014/01/09 职场文书
介绍信样本
2015/01/31 职场文书
员工自我工作评价
2015/03/06 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
PyTorch中permute的使用方法
2022/04/26 Python