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

Question

我对使用 JSON 处理 Ajax 请求和响应周期非常陌生。 我之前只使用过作为 POST 数据传递的普通旧参数，并且在响应中直接渲染 HTML，然后将其放入 DOM 中。 当我查看各种示例并阅读各种教程时，这似乎是一种相当常见的做法，即简单地从与硬编码到字符串中的 HTML 混合的 JSON 对象构建字符串，然后将字符串作为 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 进行硬编码？ 或者说人们就是这么做的？

PS 教程或其他来源的链接值得赞赏。

Answer 1

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

Answer 2

我避免在 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 3

您可以使用 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 4

您可以查看模板引擎，例如 PURE - 一开始可能有点难以进入，但它支持许多主要的 javascript 框架（还有很好的 DOMAssistant）并将 html 与数据分开。