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 Event学习补遗 addEventSimple
Feb 11 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
js表单登陆验证示例
Oct 19 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 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同时支持GIF、png、JPEG
2006/10/09 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python列表生成器的循环技巧分享
2015/03/06 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
简单了解python元组tuple相关原理
2019/12/02 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
手机业务员岗位职责
2013/12/13 职场文书
医学类个人求职信范文
2014/02/05 职场文书
护士感人事迹
2014/05/01 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
普宁寺导游词
2015/02/04 职场文书
索赔员岗位职责
2015/02/15 职场文书
谢师宴家长致辞
2015/07/27 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技