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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Django发送html邮件的方法
2015/05/26 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
机电一体化自荐信
2013/12/10 职场文书
高二历史教学反思
2014/01/25 职场文书
高中生期末评语
2014/01/28 职场文书
自我鉴定标准格式
2014/03/19 职场文书
迎新晚会策划方案
2014/06/13 职场文书
普通话宣传标语
2014/06/26 职场文书
土建施工员岗位职责
2014/07/16 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
2015年化验员工作总结
2015/04/10 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
python使用BeautifulSoup 解析HTML
2022/04/24 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python