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

best way to put ajax data into html and display on page

本文关键字：方法 最佳 显示 数据 AJAX HTML      更新时间：2023-09-26

我正在通过jquery/ajax/php get加载相当多的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，没有任何缩进，使其更容易阅读，看起来或试图在其中找到一些东西有点痛苦。

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

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

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

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

您可以在 HTML 中将 #modal-div 标记为具有特定 ID 的模板，并在显示模式窗口之前替换为实际数据。

例

<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();
  });
});
相关文章：