如何在Ajax请求响应中优雅地处理JSON对象?
问题描述:
我真的很少使用JSON来处理我的Ajax请求和响应循环。我以前只使用普通的旧参数作为POST数据,并且我已经将响应中的HTML直接放入DOM中。正如我看过各种示例并阅读各种教程,似乎是一种相当普遍的做法,只需从JSON对象中混合HTML并将其硬编码到字符串中,然后将该字符串作为innerHTML分配给某个元素。如何在Ajax请求响应中优雅地处理JSON对象?
一个常见的例子看起来是这样的:
var jo = eval(req.responseText);
var strTxt = '<span>' + jo.f_name + ' ' + jo.l_name + '</span><br/>' + 'Your Age Is: ' + jo.age + '<br/>';
$('myDiv').innerHTML = strTxt;
是否有处理JSON响应,使我没有很难在JavaScript编码的HTML更优雅(或正确)的方式?或者人们如何做到这一点?
P.S.赞赏教程或其他来源的链接。
答
我从写了很多HTML的引导走在JavaScript字符串中。我更喜欢从数据操作中分离结构。更好的选择是将代码的网页,加载基于关闭的ID值,并显示/如果有必要隐藏它:
<div id="codeBlock" style="visible=false;">
<span id="val1"></span>
<br/>
<span id="val2"></span>
<br/>
</div>
............
<script>
var jo = eval(req.responseText);
$('val1').innerHTML = jo.f_name + ' ' + jo.l_name;
$('val2').innerHTML = 'Your Age Is: ' + jo.age;
$('codeBlock').show();
</script>
正是你想要做什么,但你的想法可能不。
答
你可以创建一个使用JavaScript中的DOM元素,而不是只投下他们到DIV的innerHTML,类似如下(未经测试):
var mySpan = document.createElement("span");
var spanContent = document.createTextNode(jo.f_name + ' ' + jo.l_name);
mySpan.appendChild(spanContent);
var myBr = document.createElement("br");
mySpan.appendChild(myBr);
var otherSpanContent = document.createTextNode('Your Age Is: ' + jo.age);
mySpan.appendChild(otherSpanContent);
mySpan.appendChild(myBr);
$('myDiv').appendChild(mySpan);
答
从JSON创建的对象是标准的JavaScript对象,因此您可以轻松使用jQuery选择器来创建或访问DOM元素并从您的JSON对象插入内容。
例如。
// Create a new span element and set its text
var personSpan=$("<span>").text(jo.f_name + ' ' + jo.l_name);
// Append the span to the existing myDiv element
$("myDiv").append(personSpan);
// Create a new div element (better then br) and set its text
var personDiv=$("<div>").text("Your Age Is: " + jo.age);
// Append the new div to the existing myDiv element
$("myDiv").append(personDiv);
所以在你的结构中,你对每个ajax调用都有独立的函数吗? – 2009-02-14 17:53:37