Как элегантно обрабатывать объекты JSON в ответах от запросов Ajax?

Question

Я действительно новичок в использовании JSON для обработки цикла Ajax Request and Response. Я ранее использовал только старые параметры, переданные как данные 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, так что я не жесткое кодирование HTML в JavaScript? Или это в значительной степени, как люди это делают?

P.S. Приветствуются ссылки на учебники или другие источники.

Answer 1

Я держаться подальше от написания много HTML в строках JavaScript. Я предпочитаю разделение структуры от манипулирования данными. Лучшей альтернативой является поместить этот код на странице, загрузить значения, основанные от идентификатор, и показать/скрыть его, если необходимо:

<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

Вы можете создать элементы в DOM с помощью JavaScript, вместо того, чтобы просто сбросив их в innerHtml в DIV, что-то вроде следующего (непроверенные):

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