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

我通过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);

str1=”“；
str1+=”；
str1+=“订单号”；
str1+=”；
str1+=”；
str1+=数据订单号；
str1+=”；
str1+=”；
str1+=”；
str1+=”；
str1+=”；
str1+=”；
str1+=“订单日期”；
str1+=”；
str1+=”；
str1+=数据。订单日期；
str1+=”；
str1+=”；
//很多很多像这样的线条
$（'#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>';

var myHTML='1〕\
\
“+data.order_number+”
\
“+data.order_date+”
\
\
';

如果您必须像前面描述的那样写出HTML，您只需在每行后面的标记中添加换行符即可

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

var myHTML='1〕\
\
“+data.order_number+”
\
“+data.order_date+”
\
\
';

如果从服务器代码中传递一个对象数组（而不是一个HTML字符串），则可以使用JavaScript在数组中循环，获取数组中对象的每个属性

在每次迭代中，

$。将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>');
}

for（int i=0:i如果从服务器代码传递对象数组（而不是HTML字符串），那么可以使用JavaScript在数组中循环，获取数组中对象的每个属性

在每次迭代中，
$。将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>');
}

for（int i=0:i您可以在HTML中将#modal div标记为具有特定ID的模板，并在显示模态窗口之前替换为实际数据



订单号
订单数量
订购日期
订单日期
$（文档）.ready（函数（）{
var数据={“ordernumber”：“123”，“orderdate”：“12/01/1999”}；
$（'#模态div'）.hide（）；
$（“#提交”）。单击（函数（）{
$（'#order_num'）.html（data.ordernumber）；
$（'#order_date'）.html（data.orderdate）；
$（'#modal div'）.show（）；
});
});
您可以在HTML中将#modal div标记为具有特定ID的模板，并在显示模态窗口之前替换为实际数据



订单号
订单数量
订购日期
订单日期
$（文档）.ready（函数（）{
var数据={“ordernumber”：“123”，“orderdate”：“12/01/1999”}；
$（'#模态div'）.hide（）；
$（“#提交”）。单击（函数（）{
$（'#order_num'）.html（data.ordernumber）；
$（'#order_date'）.html（data.orderdate）；
$（'#modal div'）.show（）；
});
});
您是否考虑过使用模板？（此问题有几个模板引擎示例）这听起来像是一个糟糕的实现设计。你应该使用@MilkyWayJoe建议的模板。谢谢。你能给我一点关于模板的背景知识吗。快速的谷歌搜索给了我很多模板，但没有给我太多关于它们做什么的介绍，或者为什么它们更好或者更实用。也许你知道一些网站。你知道吗你考虑过使用模板吗？（这个问题有几个模板引擎的例子）这听起来像是一个糟糕的实现设计。你应该使用@MilkyWayJoe建议的模板。谢谢。你能给我一点关于模板的背景知识吗。一个快速的谷歌搜索给了我很多模板，但没有很多介绍它们做什么，或者为什么它们更好或者更实用。也许你知道一些网站。谢谢！但我绝对不必那样写html。还有什么更好的方法？我很感兴趣！我同意Rob Angelier和MilkyWayJoe的观点，我的解决方案不是一个伟大的设计（我现在正在尝试使用模板）但这是一个非常酷的方法，可以让我当前的系统更具可读性。谢谢！！谢谢！但我绝对不需要这样编写html。还有更好的方法吗？我非常感兴趣！我同意Rob Angelier和MilkyWayJoe的观点，我的解决方案不是一个很好的设计（我现在正尝试使用模板）但是，这是一个非常酷的方法，可以让我当前的系统更具可读性。谢谢！！我已经读到我应该尽可能少地进行dom操作。也就是说，如果可能的话，只更新一次。我认为这将是一个相当繁重的过程，当我做了几百次的时候。但也许它可以忽略不计？我已经读到我应该做dom mani尽可能少的操作。也就是说，如果可能的话，只更新一次。我认为这将是一个相当繁重的过程，我做了几百次。但也许它可以忽略不计？