2011-07-13 48 views
1

JSONの書式設定方法を理解しています。AJAX呼び出しで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しか使用できません...可能性はありますか、ここで何をしているのですか?

+0

JSONのデータだけ...あなたはそれをフォーマットする方法は完全にあなた次第です。 –

+0

ええ、私はちょうど私がレンダリングされたディスプレイをフォーマットするためにJavascriptを使うのが好きではないことを認識しています...私はそれをHTMLリファレンスで直接使用したいと思います... – Justin

+0

jsonを生成するサーバー、フォーマットされたhtmlと生データを含めることができます。 –

答えて

2

単純な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") 
0

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

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

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

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

What Javascript templating engine do you recommend?

関連する問題