如何在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

我從寫了很多HTML的引導走在JavaScript字符串中。我更喜歡從數據操作中分離結構。更好的選擇是將代碼的網頁，加載基於關閉的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 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); 

Answer 3

你可以看看一個模板引擎，如PURE - 可能有點難以理解，但它支持許多主要的javascript框架（和DOMAssistant這很好），並從數據中分離出html。

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);