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各浏览器中option元素的表现差异
Apr 07 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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实现微信退款的方法示例
2019/03/26 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
js格式化时间小结
2014/11/03 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
js简易版购物车功能
2017/06/17 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
12 种使用Vue 的最佳做法
2020/03/30 Javascript
python文件的md5加密方法
2016/04/06 Python
Python简单的制作图片验证码实例
2017/05/31 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
物流管理毕业生自荐信
2013/10/24 职场文书
简单英文演讲稿
2014/01/01 职场文书
九年级历史教学反思
2014/01/27 职场文书
《乞巧》教学反思
2014/02/27 职场文书
安全施工标语
2014/06/07 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书