从 jQuery ajax 响应 html 更新多个 div答案

【问题标题】：Update multiple div's from jQuery ajax response html从 jQuery ajax 响应 html 更新多个 div
【发布时间】：2009-06-08 04:07:57
【问题描述】：

我在 asp.net mvc 购物车中有一个页面，它允许您输入优惠券并显示订单摘要以及其他页面内容。我想要一个更新按钮，它将验证优惠券代码，报告任何错误并通过 jQuery ajax 更新页面上的订单摘要。

我知道我可以通过制作表单和局部视图并在 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 做到这一点？

【问题讨论】：

标签： jquery asp.net-mvc ajax

【解决方案1】：

可以说是比James Skidmore's answer 更清洁的解决方案，尽管想法是一样的：

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

【讨论】：

【解决方案2】：

jQuery taconite 插件专为此类场景而设计。它是一个拦截 ajax 响应的透明插件。例如，如果您的应用程序返回以下 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”元素

（来自 Taconite 网站的示例）

【讨论】：

这不需要来自服务器的特殊格式的 XML 响应吗？我希望为我的页面重用预先存在的动作处理程序。为了避免整个页面刷新，我只想更新更改的区域。这类似于 asp.net 中的 UpdatePanel 所做的。
是的，但它非常强大。特别是对于复杂的 UI 更新，它是救命稻草

【解决方案3】：

如果我理解正确，服务器响应将包含一个 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());

【讨论】：

【解决方案4】：

您可以通过使用 ajax()、get() 或 post() 方法获取整个 html 页面作为响应，并在成功回调函数中分配部分内容，或者如果您想为要单独更新的每个页面都执行此操作，您可以使用jQuery's load() method。

【讨论】：