如何优雅地处理来自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

我避免在JavaScript字符串中编写大量HTML。我更喜欢将结构与数据处理分开。更好的选择是将代码放在页面中，根据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);