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
Nov 25 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 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
Javascript----文件操作
2007/01/18 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
python实现用户登录系统
2016/05/21 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
法律工作求职自荐信
2013/10/31 职场文书
教育局长自荐信范文
2013/12/22 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
物业工作计划书
2014/01/10 职场文书
网络管理员岗位职责
2014/03/17 职场文书
环保志愿者活动方案
2014/08/14 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
导游欢送词
2015/01/31 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
golang的文件创建及读写操作
2022/04/14 Golang