AJAX Call возвращает JSON, как визуализировать правильно отформатированные данные

Question

Я пытаюсь понять, как лучше отформатировать 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 ... есть ли возможности, или я должен делать то, что я делаю здесь?

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

Вы смотрели на шаблоны плагинов jQuery?

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

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

Answer 3

Если это очень простые данные, не усложняйте свою жизнь.Это хороший способ сделать это.

Если вы действительно хотите создавать шаблоны, проверьте этот вопрос:

Какой движок шаблонов Javascript вы порекомендуете?

Answer 4

Взгляните на это

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

Answer 5

Вы можете установить html внутри этого div примерно так. Хотя предложенный вариант шаблона 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
        },