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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python之os操作方法(详解)
2017/06/15 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python中求对数方法总结
2020/03/10 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
本科生求职简历的自我评价
2013/10/21 职场文书
技校生自我鉴定
2013/12/08 职场文书
优秀求职信范文分享
2013/12/19 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书