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

那可能不完全是您想要做的，但是您知道了。