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 中的事件教程
Apr 05 Javascript
javascript不可用的问题探究
Oct 01 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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
DSP接收机前端设想
2021/03/02 无线电
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
Javascript - HTML的request类
2006/07/15 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python基于http下载视频或音频
2018/06/20 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python使用re模块验证危险字符
2020/05/21 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
外科实习自我鉴定
2013/10/06 职场文书
学籍证明模板
2014/11/21 职场文书
公司慰问信范文
2015/03/23 职场文书
订货会主持词
2015/07/01 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技