5

我对使用 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 进行硬编码？或者这几乎是人们的做法？

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

4

4 回答 4

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);
于 2009-02-14T17:40:54.857 回答
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>

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

于 2009-02-14T17:50:08.390 回答
2

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

于 2009-02-14T17:53:19.850 回答
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);
于 2009-02-14T17:58:13.240 回答