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

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

4 голосов
/ 14 февраля 2009

Я действительно новичок в использовании 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, чтобы я не усердно кодировал HTML в javascript? Или это в значительной степени, как люди это делают?

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

Ответы [ 4 ]

2 голосов
/ 14 февраля 2009

Вы можете воспользоваться механизмом шаблонов, таким как PURE - поначалу может быть немного сложно разобраться, но он поддерживает множество основных структур javascript (и DOMAssistant, что приятно) и отделяет html от данных .

2 голосов
/ 14 февраля 2009

Вы можете создавать элементы в 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);
1 голос
/ 14 февраля 2009

Объекты, созданные из 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);
1 голос
/ 14 февраля 2009

Я избегаю писать много 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>

Это может быть не совсем то, что вы хотите сделать, но вы поняли идею.

...