使用jquery发布后如何刷新多个div

Question

我有一个带有多个小部件的屏幕（它们周围都有不同的 div）。我有一个表单，当我现在发布（使用 jquery）时，它使用 ajax 更新单个表单。

我还希望刷新另外两个 div（在表单之外）。在单个 jquery ajax post 回调上触发多个不同 div 的刷新的最佳方法是什么？

Answer 1

方式 1. 让您的帖子操作部分视图包含您将用于更新其他 div 的隐藏数据。我认为这比返回特殊的 JSON 或脚本代码要好得多。您可能可以使用 .detach() 而不是 .clone()。

<div>Main post result data</div>
<div id="additional1" style="display:none">Moredata</div>

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#additional_div").html($("#result #additional1").clone().show());
}

方式 2. 在表单发布成功时执行额外的 $.get()s 来更新额外的 div。如果附加数据很大，效果会更好；如果它很小，那么#1 更好。

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#addiotional_div").load("/additional_action/updated_info");
}

Answer 2

除非您修改服务器操作以为所有需要更新的 div（可能使用 JSON 编码字符串）返回适当的 HTML，否则您无法在单个 AJAX 请求中实现此目的。

---

更新：

我想展示另一种技术。您可以有一个返回 javascript 的控制器操作。我们以下面的 ASCX 部分视图 (RefreshPartials.ascx) 为例：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

$('#partial1Container').html('<%= Template.RenderPartialToString("~/Views/Home/Partial1.ascx", ViewData) %>');
$('#partial2Container').html('<%= Template.RenderPartialToString("~/Views/Home/Partial2.ascx", ViewData)%>');

RenderPartialToString is taken from here 的位置（备注：此方法可能存在一些缺陷，可能不适用于所有情况，但您可以尝试一下）。接下来，您对控制器操作执行 AJAX 请求，该操作仅呈现此部分：

public ActionResult RefreshPartials()
{
    return PartialView("RefreshPartials");
}

您需要在您的 ajax 请求中指定 dataType: script，以便评估包含在前一个部分中的 javascript：

$.ajax({
    url: '/home/refreshpartials',
    dataType: 'script'
});

最后一点是正确转义RenderPartialToString 方法的结果，因为它可能包含阻止javascript 的字符。这是您可能使用的一种方法：

public static string JsEscape(this HtmlHelper html, string content)
{
    content = Regex.Replace(content, "(\r\n)|(\r)|(\n)", @"\n", RegexOptions.Multiline);
    content = Regex.Replace(content, "(?<!\\\\)\"", "\\\"", RegexOptions.Multiline);
    return content;
}

所以最后你的部分可能看起来像这样：

$('#partial1Container').html('<%= Html.JsEscape(Template.RenderPartialToString("~/Views/Home/Partial1.ascx", ViewData)) %>');

您可以看到，您可以在RefreshPartials.ascx 中放置您喜欢的任何 javascript，以使您的 AJAX 请求变得花哨。

备注：思路来自Ruby On Rails Javascript Generators。