如何在Ajax请求响应中优雅地处理JSON对象？

Question

我真的很少使用JSON来处理我的Ajax请求和响应循环。我以前只使用普通的旧参数作为POST数据，并且我已经将响应中的HTML直接放入DOM中。正如我看过各种示例并阅读各种教程，似乎是一种相当普遍的做法，只需从JSON对象中混合HTML并将其硬编码到字符串中，然后将该字符串作为innerHTML分配给某个元素。

一个常见的例子看起来是这样的：

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.赞赏教程或其他来源的链接。

Answer 1

我从写了很多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> 

正是你想要做什么，但你的想法可能不。

Answer 2

你可以创建一个使用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); 

Answer 3

你可以看看一个模板引擎，如PURE - 可能有点难以理解，但它支持许多主要的javascript框架（和DOMAssistant这很好），并从数据中分离出html。

Answer 4

从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);