jquery的$getjson调用并获取远程的JSON字符串问题


Posted in Javascript onDecember 10, 2012

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("button").click(function(){ 
$.getJSON("ajax6.asp",function(data){ 
$("#pig").html(data.name); 
}); 
}); 
}); 
</script> 
<body> 
<button>click</button> 
<div id="pig"></div> 
</body> 
</html>

其中ajax6.asp为
<% 
response.Write(“{name:'peter',age:18}”); 
%>

为什么获取不了呢?,我想获取asp的json。
解决的关键问题是:key和value需要双引号,如下:
response.Write(“{“”name”":”"peter”",”"age”":”"18″”}”)

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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
javascript操作数组详解
Dec 17 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 #Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 #Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 #Javascript
js切换div css注意的细节
Dec 10 #Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 #Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 #Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php 魔术函数使用说明
2010/02/21 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
Smarty保留变量用法分析
2016/05/23 PHP
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
python魔法方法-自定义序列详解
2016/07/21 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python中str.join()简单用法示例
2018/03/20 Python
python学生管理系统
2019/01/30 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
园林设计师自荐信
2013/11/18 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
公司市场部岗位职责
2015/04/15 职场文书
于丹讲座视频观后感
2015/06/15 职场文书