將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並顯示在頁面上的最佳方法

回答

相關問題