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 相关文章推荐
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
Vue实现点击箭头上下移动效果
Jun 11 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
js正确获取元素样式详解
2009/08/07 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Python多线程实例教程
2014/09/06 Python
python提取内容关键词的方法
2015/03/16 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python表格存取的方法
2018/03/07 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python科学计算之narray对象用法
2019/11/25 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
《圆明园的毁灭》教学反思
2014/02/28 职场文书
公司合作协议范文
2014/10/01 职场文书
消防宣传标语大全
2015/08/03 职场文书