AJAX呼び出しでJSONが返され、適切に書式設定されたデータをレンダリングする方法

Question

JSONの書式設定方法を理解しています。

私はこのようなジャバスクリプトの形式を使用しています

、

<script type="text/javascript"> 
$(document).ready(function(e) { 
    $.ajax({ 
     url: 'http://www.domain.ca/classes/brain.php?a=select', 
     crossDomain: true, 
     type: 'GET', 
     dataType: 'json', 

     beforeSend: function() { 
     }, 

     success: function(data, textStatus, jqXHR) { 
      $('.pageLoaded').html(data.name +' <br />'+ data.email); 
     }, 

     error: function(responseText) { 
      alert('Error: '+ responseText.toString()); 
     } 
    }); 
}); 
</script> 
<div data-role="content" class="pageLoaded"></div> 

しかし、私はディスプレイがどのように見えるかをフォーマットするためのより良い方法を持ってできるようにしたいと思います。おそらくテンプレートファイルを呼び出すでしょうか？

私はHTML + CSS + Javascriptしか使用できません...可能性はありますか、ここで何をしているのですか？

Answer 1

単純なhtmlの場合、name + <LINE BREAK> + emailのように、すでに何をしていますか？

HTMLが複雑になる場合、jQuery.templateはあなたの友人です。このような状況のために

例は次のようになります。

1）あなたが生成するHTMLレイアウトでスクリプトタグを追加します。

<script id="nameTemplate" type="text/x-jquery-tmpl"> 
    ${name} 
    <br /> 
    ${email} 
</script> 

2）にあなたのAJAXの成功ハンドラを変更します。

$("#nameTemplate").tmpl(data).appendTo(".pageLoaded") 

Answer 2

このdiv内にhtmlを設定することができます。 jqueryのテンプレートオプションが推奨されていますが、より良い選択肢と思われます。あなたはこの

success: function(data, textStatus, jqXHR) { 
      $("#name").val(data.name); 
///other fields 
     }, 

Answer 3

この

http://scriptble.com/2011/01/underscore-js-templates/

Answer 4

を見てみましょうか、CSSとし、JavaScriptで好きな

<div data-role="content" class="pageLoaded"> 
    <div id="name"></div> 
    <div id="email"></div> 
    </div> 

スタイルこれは、あなたはjQueryのテンプレートプラグインに見たことがありますか？

https://github.com/jquery/jquery-tmpl

http://api.jquery.com/jQuery.template/

Answer 5

、それは非常に単純なデータなら、あなたの人生を複雑にしないでください。それはそれを行う良い方法です。

あなたが本当にテンプレートをしたい場合は、この質問を確認してください。

What Javascript templating engine do you recommend?