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 02 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
javascript随机变色实例代码
Oct 15 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版(1)
2006/10/09 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
TensorFlow实现Batch Normalization
2018/03/08 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
护士演讲稿范文
2014/01/05 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
低碳环保倡议书
2014/04/14 职场文书
团日活动总结报告
2014/06/25 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
公积金贷款承诺书
2015/04/30 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技