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进行硬编码？或者这是人们如何做到的？

P.S。赞赏教程或其他来源的链接。

Answer 1

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

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

Answer 3

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

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

4 个答案: