从jQuery ajax response html更新多个div

I have a page in a asp.net mvc shopping cart which allows you to enter a coupon and shows an order summary along with other page content. I would like to have an Update button which will validate the coupon code, report any errors and also update the order summary on the page via jQuery ajax.

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

I know I could do this by making a form and partial view and use the target property in the jQuery submit. However, was thinking I could do something like the following:

我知道我可以通过制作表单和部分视图并在jQuery提交中使用target属性来实现。但是,我以为我可以做以下事情:

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

The advantage here is that I wouldn't have to do a full page refresh or create a partial view containing all of the areas that need updating. Is there an appropriate way to do this via jQuery ajax?

这里的优点是我不必进行整页刷新或创建包含所有需要更新的区域的局部视图。有没有一种合适的方法通过jQuery ajax来做到这一点?

4 个解决方案

#1

An arguably cleaner solution than James Skidmore's answer, although the idea is the same:

比James Skidmore的答案更清晰的解决方案,尽管这个想法是一样的:

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

#2

The jQuery taconite plugin was made for these kinds of scenarios. It is a transparent plugin that intercepts ajax responses. For example, if your application returens the following XML:

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>

It will:

Replace the "promotion" div with a "Thank you" message

用“谢谢”消息替换“促销”div

Remove the "emptyMsg" row from the shopping cart and remove any elements with the class "preOrder"

从购物车中删除“emptyMsg”行并删除“preOrder”类的所有元素

Add a row to the shopping cart with the quantity, descption and amount of the order

使用订单的数量,描述和金额向购物车添加一行

Update the "cartTotal" element with the new shopping cart total

使用新购物车总数更新“cartTotal”元素

(example taken from the Taconite website)

(例子来自Taconite网站)

#3

If I understand you correctly, the server response will include an HTML page which you want to pull specific elements from and update the current page's respective elements accordingly.

如果我理解正确,服务器响应将包含一个HTML页面,您希望从中提取特定元素并相应地更新当前页面的相应元素。

There may be better ways of doing this, but here is what comes to mind. Also be sure to switch the IDs mentioned to classes:

可能有更好的方法来做到这一点,但这是我想到的。还要确保将提到的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

You could do this in one call by getting a whole html page as a response with the ajax(), get() or post() methods and carving up parts of it to dole out in the success callback function, or if you wanted to do it for each piece of the page you wanted to update separately you could use jQuery's load() method.

您可以通过将整个html页面作为响应使用ajax(),get()或post()方法并将其中的一部分分解为成功回调函数中的一部分,或者如果您想要为你想要单独更新的每个页面执行此操作,您可以使用jQuery的load()方法。

#1