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现实多行信息
Aug 26 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
js中new一个对象的过程
Feb 20 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JS中关于正则的巧妙操作
Aug 31 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
JavaScript实现优先级队列
Dec 06 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程序
2006/10/09 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
详解JS模块导入导出
2017/12/20 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
Python实现批量压缩图片
2018/01/25 Python
python format 格式化输出方法
2018/07/16 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python读取实时数据流示例
2019/12/02 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
女儿十岁生日答谢词
2014/01/27 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
小学元宵节活动总结
2015/02/06 职场文书
预备党员介绍人意见
2015/06/01 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技