将Ajax数据放入html并显示在页面上的最佳方法

我正在通过jquery/ajax/php获取相当多的json数据。当我得到数据时，我会弹出一个模式显示在一些表格中。我这样做就是这样。将Ajax数据放入html并显示在页面上的最佳方法

str1 = "<table class='line_item_order_info_table'>"; 
str1 += "<tr><td class='line_item_label' >"; 
str1 += "Order no."; 
str1 += "</td></tr>"; 
str1 += "<tr><td class='line_item_data' id='order_number_td'>"; 
str1 += data.order_number; 
str1 += "</td></tr>"; 
str1 += "</table>"; 

str1 += "</td>"; 
str1 += "<td>"; 

str1 += "<table class='line_item_order_info_table'>"; 
str1 += "<tr><td class='line_item_label'>"; 
str1 += "Order date"; 
str1 += "</td></tr>"; 
str1 += "<tr><td class='line_item_data'>"; 
str1 += data.order_date; 
str1 += "</td></tr>"; 
str1 += "</table>"; 

//many, many more lines that look like this 

$('#modal-div').html(str1);

这是最好的方式把这个数据通过JavaScript的HTML？像这样跟踪很难。这么多的html，没有任何地方的任何缩进，使它更容易阅读，是有点痛苦的看看或试图找到的东西英寸

感谢，如果你能指出我的方向更好的战略！谢谢！

来源

2012-05-16 1252748

你有没有考虑过使用模板？（这个问题有几个模板引擎的例子http://stackoverflow.com/questions/4286181/what-is-the-best-current-javascript-templating-engine） – MilkyWayJoe

这听起来像一个糟糕的实现设计。你应该使用@MilkyWayJoe建议的模板。 –

谢谢。你能给我一些模板背景吗？一个快速的谷歌搜索给了我很多，但没有很多介绍他们做什么或为什么他们更好或更实际的我在做什么。也许你知道一些网站.. – 1252748

如果你绝对必须按照你所描述的写出你的HTML，你可以在每一行后面添加换行符到你的标记。

var myHTML = '<div class="bleh"> \ 
    <ul class="bleh2"> \ 
     <li>'+ data.order_number +'</li> \ 
     <li>'+ data.order_date +'</li> \ 
    </ul> \ 
    </div>';

来源

2012-05-16 14:43:28 sbeliv01

谢谢！但我绝对不得不这样写HTML。什么是更好的方法？我很感兴趣！ – 1252748

我同意Rob Angelier和MilkyWayJoe的说法，我的解决方案并不是一个很好的设计（我现在正在尝试使用模板），但这是一种非常酷的方式，可以使我的当前系统更具可读性。谢谢！！ – 1252748

如果您从您的服务器代码传递对象的数组（HTML，而不是一个字符串），那么你可以使用JavaScript遍历数组，每个抓阵列中的对象的属性。

在每次迭代$.append的html到你的#modal-div。

东西沿着这一行：

for (int i = 0: i<msg.d.length; i++) { 

    var order_number = msg.d[i].order_number; 
    ... 

    $('#modal-div').append('<li>'+order_number +'</li>'); 
}

来源

2012-05-16 14:57:01 Greg

您可以在HTML标记＃模式-DIV作为具有特定ID的模板，显示了模态窗口之前与实际数据替换。

example

<div id="modal-div"> 
<table class='line_item_order_info_table'> 
    <tr> 
    <td class='line_item_label' >Order Number</td> 
    <td id="order_num">order_num</td> 
    </tr> 
    <tr> 
    <td class='line_item_label'>Order date</td> 
    <td id="order_date">order_date</td> 
    </tr> 
</table> 
</div> 

$(document).ready(function(){ 
    var data ={"ordernumber":"123", "orderdate":"12/01/1999"}; 
    $('#modal-div').hide(); 
    $('#submit').click(function(){ 
    $('#order_num').html(data.ordernumber); 
    $('#order_date').html(data.orderdate); 
    $('#modal-div').show(); 
    }); 
});

来源

2012-05-16 15:17:48 mossimokim

我读过我应该尽可能少地做dom操作。即如果可能的话，只更新一次。我认为这将是一个非常沉重的过程，当我做了几百次。但也许它可以忽略不计？ – 1252748

将Ajax数据放入html并显示在页面上的最佳方法

回答

相关问题