如何优雅地处理来自 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？或者这就是人们的做法？

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

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>

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