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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python从入门到精通(DAY 1)
2015/12/20 Python
Python注释详解
2016/06/01 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
物业电工岗位职责
2013/11/20 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
渡河少年教学反思
2014/02/12 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
后备干部推荐材料
2014/12/24 职场文书
golang中的空接口使用详解
2021/03/30 Python
详解python的异常捕获
2022/03/03 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript