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

【问题标题】：How To Elegantly Handle JSON Objects in Responses From Ajax Requests?如何优雅地处理来自 Ajax 请求的响应中的 JSON 对象？
【发布时间】：2009-02-14 17:31:05
【问题描述】：

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

附：教程或其他来源的链接表示赞赏。

【问题讨论】：

标签： ajax json prototypejs scriptaculous

【解决方案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>

这可能不是您想要做的，但您明白了。

【讨论】：

那么在你的结构中，你对每个 ajax 调用都有一个单独的函数吗？
但我认为你的建议可能正是我想要的。
我认为将“myDiv”而不是“codeBlock”更适合我，以便对您的示例更有意义（它们将是同一件事）。
哦，我不知道如何回答你的第一条评论，因为我觉得我对你的情况了解不够。也许开始另一个问题并提供更多细节。 :)

【解决方案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);

【讨论】：

【解决方案3】：

您可以查看模板引擎，例如 PURE - 一开始可能有点难以入门，但它支持许多主要的 javascript 框架（以及不错的 DOMAssistant）并将 html 从数据中分离出来。

【讨论】：

【解决方案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);

【讨论】：