エレガントなAjaxのリクエストからの応答でJSONオブジェクトを処理する方法？

Question

私はAjaxのリクエストとレスポンスのサイクルを処理するためにJSONを使って本当に新しいです。私は以前にPOSTデータとして渡すだけで、昔ながらのパラメータを使用していると私は、DOMの中に入れた応答にストレートHTMLをレンダリングしました。私は様々な例を見て、様々なチュートリアルを読んでてきたように、単にハード文字列にコーディングされています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;

私はハードJavaScriptでHTMLをコーディングないよように、JSONレスポンスを処理するよりエレガントな（または正しい）方法はありますか？それともこれはかなりの人がそれを行う方法ですか？

P.S。チュートリアルや他の情報源へのリンクが高く評価されています。

Answer 1

私は、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 2

あなたは、以下の（未テスト）のようなものをJavaScriptを使用してだけではなくDIVのinnerHTMLプロパティにドロップDOM内の要素を作成することができます：

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から作成されたオブジェクトは、したがって、あなたは簡単にjQueryのセレクタを作成したり、アクセスDOM要素を使用して、JSONオブジェクトからコンテンツを挿入することができ、標準のJavaScriptオブジェクトです。

たとえばます。

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