代码之家 › 专栏 › 技术社区 › Todd Smith Brandon

从jquery ajax response html更新多个div

ajax asp.net-mvc jquery

Todd Smith Brandon · 技术社区 · 15 年前

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

我知道我可以通过创建一个表单和局部视图来实现这一点,并在jquery submit中使用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

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

4 回复 | 直到 15 年前

Community Egal 7 年前

可以说是比 James Skidmore's answer 尽管想法相同:

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

Philippe Leybaert 15 年前

这个 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>

它将:

用“谢谢”信息替换“促销”部分
从购物车中删除“emptymsg”行,并删除类为“preorder”的任何元素
在购物车中添加一行订单的数量、说明和金额
用新的购物车总数更新“cartotal”元素

(来自Taconite网站的示例)

James Skidmore 15 年前

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

Gabriel Hurley 15 年前

您可以在一次调用中实现这一点,方法是使用ajax()、get()或post()方法将整个HTML页面作为响应,并在success回调函数中分割出要分配的部分,或者如果您想对每一页分别进行更新,则可以使用 jQuery's load() method .

推荐文章

jpWebLearner · BenchmarkDotNet与MVC操作控制器的结合使用

1 年前

PixelScribe · 实体框架EDMX未更新ASP.NET web应用程序中的连接字符串

1 年前

ankara · 带有添加条件组的任意位置滑块

1 年前

Akshay Malvankar · 我对在asp中使用asyn、await()和run()方法感到困惑。净mvc[关闭]

2 年前

Pablo · 为什么POST-request方法返回null,但GET-request返回正确的对象

2 年前

AlÄ±yev Rufet · 无法构造某些服务(验证服务描述符的服务类型时出错:Restaurant.Data.IAppRepository

2 年前

Tom Rushton · 启动时路由错误。当ASP出现404或500错误时,cs不会重定向到控制器。NET核心MVC

2 年前

lasha · 对象引用未设置为对象的实例。在里面Net mvc框架[重复]

2 年前

Ken Janka · 迁移ASP。NET Core 5应用程序。6(使用最小网络托管模型)

2 年前

nnmmss · 根据查询字符串值激活li

2 年前