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为对象原型prototype添加属性的两种方式
Aug 01 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
python实现随机加减法生成器
2020/02/24 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
利用python汇总统计多张Excel
2020/09/22 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
模范教师事迹材料
2014/02/10 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
服务员岗位职责范本
2015/04/09 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Java设计模式之代理模式
2022/04/22 Java/Android
TypeScript 内置高级类型编程示例
2022/09/23 Javascript