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

Question

我正在通过 jquery/ajax/php 获取相当多的 json 数据。当我获得数据时，我会在弹出的模式上的一些表格中显示它。我就是这样做的。

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，在任何地方都没有任何缩进以使其更易于阅读，看起来或试图在其中找到一些东西有点痛苦。

如果您能指出更好的策略方向，不胜感激！谢谢！

Answer 1

如果您绝对必须按照您的描述写出您的 HTML，您可以在每行之后在您的标记中添加换行符。

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

Answer 2

如果您从服务器代码（而不是 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>');
}

Answer 3

您可以在 HTML 中将 #modal-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();
  });
});