87,921
社区成员
发帖
与我相关
我的任务
分享javascript接受json格式的数据问题
自己不太会javascript,现在后台得到了json格式的字符串数据数据，怎么将这个数据返回到页面，再放到动态生成的表格里，在网上查了下，用jquery.get("servleturl",data,callback，"json")的函数，但是我在callback(data)函数具体怎么写，求类似的代码，主要是js代码，先 谢谢了
...全文
请发表友善的回复…
发表回复
暗夜螃蟹 2012-02-24
- 打赏
- 举报
单取值就行了呗
$.get("http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action","",
function(data){
var dataObj=eval("("+data+")");
for(var i=0;i<dataObj.dealers.length;i++){
alert(dataObj.dealers[i].name);
}
});
aihua17 2012-02-24
- 打赏
- 举报
后台只要给函数传一个参数就可以了
aihua17 2012-02-24
- 打赏
- 举报
返回的JSON直接就是一个对象而已，就按照对象的操作方式来就可以了，for循环就可以循环出来
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>表格生成</title>
<style type="text/css">
td {
padding: 5px;
border: 1px solid #ccc;
text-align: right;
}
input {
width: 50px;
}
label {
margin: 0 0 0 20px;
font-weight: bold;
}
#create {
width: 80px;
margin: 0 0 0 20px;
}
#express{ text-align:left;}
</style>
</head>
<body>
<div id="expTable">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8%">物流公司：</td>
<td width="92%">联邦快递</td>
</tr>
<tr>
<td>运单号码：</td>
<td>123121554</td>
</tr>
<tr>
<td>物流跟踪：</td>
<td rowspan="2"><div id="express">12312113</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<script type="text/javascript">
var json = {
"message":"ok",
"status":"1",
"state":"3",
"data":[{"time":"2012-02-11 19:28:45","context":"北京市朝阳区十里堡/揽收扫描/取件人:吴海军 "},{"time":"2012-02-11 19:28:46","context":"北京市朝阳区十里堡/业务员收件/取件人:吴海军 "},{"time":"2012-02-11 20:45:31","context":"北京分拨中心/下车扫描 "},{"time":"2012-02-11 20:53:08","context":"北京分拨中心/装件入包扫描 "},{"time":"2012-02-13 01:02:10","context":"虎门分拨中心/拆包扫描 "},{"time":"2012-02-13 01:03:35","context":"虎门分拨中心/装件入车扫描 "},{"time":"2012-02-13 02:03:15","context":"广东省东莞市市虎门/下车扫描 "},{"time":"2012-02-13 06:51:14","context":"广东省东莞市市虎门/派件扫描/派件人:黎根峰 "},{"time":"2012-02-13 11:27:04","context":"广东省东莞市市虎门/PDA正常签收扫描/签收人:曾小平 "}]
};
function getData(json) {
var expTable = document.getElementById("expTable"),
id = document.getElementById("express");
json = json||"";
if (json == "") {
var inner = "暂无发货数据，请耐心等待！";
expTable.innerHTML = inner;
} else {
inner = "";
if (json.status == 1) {
for (var i = 0, j = json.data.length; i < j; i++) {
if (i != j - 1) {
inner += json.data[i].time + " " + json.data[i].context + "</br>";
} else {
inner += "<span>" + json.data[i].time + " " + json.data[i].context + "</span>";
}
}
} else {
inner = "暂无跟踪数据";
}
id.innerHTML = inner;
}
}
getData(json);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>表格生成</title>
<style type="text/css">
td {
padding: 5px;
border: 1px solid #ccc;
text-align: right;
}
input {
width: 50px;
}
label {
margin: 0 0 0 20px;
font-weight: bold;
}
#create {
width: 80px;
margin: 0 0 0 20px;
}
#express{ text-align:left;}
</style>
</head>
<body>
<div id="expTable">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8%">物流公司：</td>
<td width="92%">联邦快递</td>
</tr>
<tr>
<td>运单号码：</td>
<td>123121554</td>
</tr>
<tr>
<td>物流跟踪：</td>
<td rowspan="2"><div id="express">12312113</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<script type="text/javascript">
var json = {
"message":"ok",
"status":"1",
"state":"3",
"data":[{"time":"2012-02-11 19:28:45","context":"北京市朝阳区十里堡/揽收扫描/取件人:吴海军 "},{"time":"2012-02-11 19:28:46","context":"北京市朝阳区十里堡/业务员收件/取件人:吴海军 "},{"time":"2012-02-11 20:45:31","context":"北京分拨中心/下车扫描 "},{"time":"2012-02-11 20:53:08","context":"北京分拨中心/装件入包扫描 "},{"time":"2012-02-13 01:02:10","context":"虎门分拨中心/拆包扫描 "},{"time":"2012-02-13 01:03:35","context":"虎门分拨中心/装件入车扫描 "},{"time":"2012-02-13 02:03:15","context":"广东省东莞市市虎门/下车扫描 "},{"time":"2012-02-13 06:51:14","context":"广东省东莞市市虎门/派件扫描/派件人:黎根峰 "},{"time":"2012-02-13 11:27:04","context":"广东省东莞市市虎门/PDA正常签收扫描/签收人:曾小平 "}]
};
function getData(json) {
var expTable = document.getElementById("expTable"),
id = document.getElementById("express");
json = json||"";
if (json == "") {
var inner = "暂无发货数据，请耐心等待！";
expTable.innerHTML = inner;
} else {
inner = "";
if (json.status == 1) {
for (var i = 0, j = json.data.length; i < j; i++) {
if (i != j - 1) {
inner += json.data[i].time + " " + json.data[i].context + "</br>";
} else {
inner += "<span>" + json.data[i].time + " " + json.data[i].context + "</span>";
}
}
} else {
inner = "暂无跟踪数据";
}
id.innerHTML = inner;
}
}
getData(json);
</script>
</body>
</html>
暗夜螃蟹 2012-02-24
- 打赏
- 举报
$.get("http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action","",
function(data){
var dataObj=eval("("+data+")");
// var dataObj = $.jsonToObject(data.text);
// for(var i=0;i<dataObj.dealers.length;i++){
// alert(dataObj.dealers[i].name);
// }
$.each(dataObj.dealers, function(i, v){
$("#success").append(v.name).append("<br/>");
document.getElementById("result").innerHTML+=v.name+"<br/>";
})
});
暗夜螃蟹 2012-02-24
- 打赏
- 举报
<html>
<head>
<title>jQuery Ajax 实例演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<script src="http://code.jquery.com/jquery-1.4.3.js"></script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<span id="success" > </span>
</form>
<script type="text/javascript">
//方式一
//$.getJSON("http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action",function(data){alert(data);});
//方式二
//$.get("http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action","",function(data){alert(data);});
//方式三
/*
$.ajax({
type: "POST",//请求方式
url: "http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action",//地址，就是action请求路径
data: "json",//数据类型text xml json script jsonp
success: function(msg){//返回的参数就是 action里面所有的有get和set方法的参数
document.getElementById("result").innerHTML=msg;
}
});
*/
$.get("http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action","",
function(data){
var dataObj=eval("("+data+")");
// var dataObj = $.jsonToObject(data.text);
// for(var i=0;i<dataObj.dealers.length;i++){
// alert(dataObj.dealers[i].name);
// }
$.each(dataObj.dealers, function(i, v){
//$("p").append(name + "==");
//alert(i+"-->"+v.name);
$("#success").html(v.name);
document.getElementById("result").innerHTML+=v.name+"<br/>";
})
});
</script>
</body>
</html>
hkh_1012 2012-02-23
- 打赏
- 举报
我用的是jquery第2中方式，关键有一点不清楚，返回回来的data，如果不用callback函数的参数接受，直接在servlet里out.print就可以在内面里显示出来，但是我一加上callback与json的参数后，死活在页面没显示，
function(data){
var obj = data;
var m;
for(m in obj){//m是对象里的属性名，它也是后台动态生成的，只有一个
alert(m);
}
var a = m
$("#result").html(a);
$("#resulttable").children("......")//添加行
}
function(data){
var obj = data;
var m;
for(m in obj){//m是对象里的属性名，它也是后台动态生成的，只有一个
alert(m);
}
var a = m
$("#result").html(a);
$("#resulttable").children("......")//添加行
}
暗夜螃蟹 2012-02-23
- 打赏
- 举报
<html>
<head>
<title>jQuery Ajax 实例演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<script src="http://code.jquery.com/jquery-1.4.3.js"></script>
<script type="text/javascript">
//方式一
//$.getJSON("http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action",function(data){alert(data);});
//方式二
//$.get("http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action","",function(data){alert(data);});
//方式三
$.ajax({
type: "POST",//请求方式
url: "http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action",//地址，就是action请求路径
data: "json",//数据类型text xml json script jsonp
success: function(msg){//返回的参数就是 action里面所有的有get和set方法的参数
document.getElementById("result").innerHTML=msg;
}
});
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<span id="result"></span>
</form>
</body>
</html>
暗夜螃蟹 2012-02-23
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>异步调用JSON</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
var xmlhttp;
// 创建XMLHTTPRequest对象
function createXMLHTTPRequest()
{
if(window.ActiveXObject)//②如果当前浏览器为IE
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHTTPRequest)//③如果是其他浏览器
{
xmlhttp = new XMLHTTPRequest();
}
}
function getInfo()
{
createXMLHTTPRequest();
xmlhttp.open("get", "http://audicms.ogilvy.com.cn/webapp/front/dealerapi!getdealerlist.action", true);
xmlhttp.onreadystatechange = returnInfo;
xmlhttp.send(null);
}
function returnInfo()
{
if(xmlhttp.readyState == 4)
{
var info = xmlhttp.responseText;
eval("var json= " + info);
var message="";
var dealerlocation="";
var salesphone="";
for(var i=0;i<json.dealers.length;i++){
message+="经销商名称：<font style='color:red;'>" + json.dealers[i].name + "</font> <br/>";
salesphone+="经销商电话：<font style='color:red;'>" + json.dealers[i].salesphone + "</font> <br/>";
dealerlocation+="经销商经纬度：<font style='color:red;'>" + json.dealers[i].location + "</font> <br/>";
}
document.getElementById("showInfo").innerHTML = message;
document.getElementById("salesphone").innerHTML = salesphone
document.getElementById("location").innerHTML=dealerlocation;
}
}
-->
</script>
<body>
<br/><br/>
<h2 style="color: red;">异步调用JSON</h2>
<br/><input type="button" value="获取JSON数据" onclick="getInfo()" />
<table>
<tr>
<td><div id="showInfo"></div></td>
<td><span id="salesphone"><span></td>
<td><span id="location"><span></td>
</tr>
</table>
</body>
</html>
hkh_1012 2012-02-23
- 打赏
- 举报
我写的是4个。。
spcmusic 2012-02-23
- 打赏
- 举报
jquery.get可以有3个参数么?
