從jQuery ajax響應中更新多個div html

我在一個asp.net mvc購物車中有一個頁面，它允許您輸入優惠券並顯示訂單摘要以及其他頁面內容。我想要一個更新按鈕，它將驗證優惠券代碼，報告任何錯誤，並通過jQuery ajax更新頁面上的訂單摘要。從jQuery ajax響應中更新多個div html

我知道我可以做一個表單和部分視圖，並使用jQuery提交中的目標屬性。然而，就在想我可以做類似如下：

var options 
{ 
    success: function (responseHtml) // contains the entire form in the response 
    { 
    // extract sub-sections from responseHtml and update accordingly 

    // update <div id="coupon"> with coupon div from responseHtml 
    // update <div id="order-summary> with order summary div from responseHtml 
    } 
} 
$('#my-form').ajaxSubmit(options); // submits the entire form

的優勢在這裏是我不會做一個完整的頁面刷新或創建一個包含所有需要更新的區域的局部視圖。有沒有一種合適的方法通過jQuery ajax做到這一點？

來源

2009-06-08 Todd Smith

的可以說是清潔的解決方案比James Skidmore's answer，雖然想法是一樣的：

var $holder = $('<div/>').html(responseHtml); 
$('#coupon').html($('#coupon', $holder).html()); 
$('#order-summary').html($('#order-summary', $holder).html());

來源

2009-06-08 04:54:36

這是一個代碼小寶石 - 非常感謝你：] – xgstr 2013-08-22 09:19:13

如果我理解正確，服務器響應將包括一個HTML頁面，您希望從中拉出特定元素並相應地更新當前頁面的各個元素。

可能有更好的方法來做到這一點，但這裏是想到的。此外，一定要切換提到類的ID：）

// In your success function shown in your question: 
if ($('#ajaxResponse').length > 0) 
{ 
    $('#ajaxResponse').remove(); // Remove previous AJAX response if it exists 
} 
$('body').append('<div id="ajaxResponse" style="display: none;">'+responseHtml+'</div>'); 
$('.coupon:first').html($('#ajaxResponse .coupon').html()); 
$('.order-summary:first').html($('#ajaxResponse .order-summary').html());

來源

2009-06-08 04:18:22

你可以通過讓整個HTML頁面與AJAX（響應這樣做的一個電話，得到（）或交（）方法和雕刻在成功回調函數中添加部分功能，或者如果您希望爲每個要單獨更新的頁面執行此操作，則可以使用jQuery's load() method。

來源

2009-06-08 04:48:22

的jQuery taconite插件是爲這些種情景製成。它是一個截取ajax響應的透明插件。例如，如果你的應用程序returens以下XML：

<taconite> 
    <replace select="#promotion"> 
     <div>Thank you for your order!</div> 
    </replace> 

    <remove select="#emptyMsg, .preOrder" /> 

    <append select="#cartTable tbody"> 
     <tr><td>1</td><td>Dozen Red Roses</td><td>$18.99</td></tr> 
    </append> 

    <replaceContent select="#cartTotal"> 
     $18.99 
    </replaceContent> 
</taconite>

它會：

更換「促銷」的div有「謝謝」的消息
從刪除「emptyMsg」行購物車中刪除「preOrder」類別的任何元素
向購物車添加一行數量，說明和金額的訂單
更新「cartTotal」元素在新的購物車總

（例如，從鐵燧巖網站獲取）

來源

2009-06-08 07:25:32

這是否需要從一個特殊格式的XML響應服務器？我希望能重複使用先前存在的操作處理程序來處理我的頁面。爲了避免整個頁面刷新，我只想更新改變的區域。這與ASP.NET中的UpdatePanel類似。 – 2009-06-08 16:45:05

從jQuery ajax響應中更新多個div html

回答

相關問題