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 相关文章推荐
取得父标签
Nov 14 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
js document.write()使用介绍
Feb 21 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
javascript实现的简单计时器
Jul 19 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
antd table按表格里的日期去排序操作
Nov 17 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中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
使用JS读秒使用示例
2013/09/21 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python中pip的安装与使用教程
2018/08/10 Python
python实现简单名片管理系统
2018/11/30 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
大型车展策划方案
2014/02/01 职场文书
助理政工师申报材料
2014/06/03 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
python神经网络Xception模型
2022/05/06 Python