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

你可以在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
        },

Answer 4

看看这个

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

Answer 5

如果这是非常简单的数据，请不要让您的生活复杂化。这是做这件事的好方法。

如果你真的想做模板，请检查这个问题：

What Javascript templating engine do you recommend?

AJAX Call返回JSON，如何呈现格式正确的数据

5 个答案: