AJAX調用返回JSON，如何呈現格式正確的數據

我想弄清楚如何以更好的方式格式化JSON。AJAX調用返回JSON，如何呈現格式正確的數據

我使用這樣的JavaScript的形式，

<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 ...有沒有什麼可能，還是我必須做我在這裏做的事情？

來源

2011-07-13 Justin

JSON的只是數據......你怎麼格式化這完全取決於你。 –

是的，我意識到，我只是不喜歡用Javascript來格式化我的渲染顯示器......我想直接在HTML參考中使用它... – Justin

如果你已經控制了生成json的服務器，您可以包含格式化的html以及原始數據。 –

對於簡單的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")

來源

2011-07-13 17:29:31 Chandu

你可以在這個div裏設置html這樣的東西。雖然jquery模板選項建議似乎是更好的選擇。

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

風格這是你想要的CSS和JavaScript中做到這一點

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

來源

2011-07-13 17:29:42

看看這個

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

來源

2011-07-13 17:29:51 ShankarSangoli

你看着jQuery的模板插件？

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

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

來源

2011-07-13 17:30:29 Jordan

如果它是非常簡單的數據，你的生活不復雜。這是做這件事的好方法。

如果你真的想這樣做模板，看看這個問題：

What Javascript templating engine do you recommend?

來源

2011-07-13 17:33:53 corbacho

AJAX調用返回JSON，如何呈現格式正確的數據

回答

相關問題