成功发布后如何在不刷新页面的情况下更新页面内容

Question

我有一个 MVC 应用程序，这是我的 ajax 代码。我希望我的页面内容在成功后自动更新而不刷新页面。我看了很多文章，但我找不到任何对我有用的东西。我有一个 JStree，我想在成功后创建一个新节点，节点名称在树中自动更新，无需刷新页面。

$(".btn").click(function () {                  
                    var check = $(".newName").val();                   
                    if (check != "") {
                        $.ajax({
                            url: '@Url.Action("EditUserProfile", "Home")',
                            type: "POST",
                            cache: false,
                            data:{ folder:Name,subId:id},
                            success: function (data) {

                            }
                        });
                        e.preventDefault();
                    }

Answer 1

您可以在不刷新的情况下更新您的页面内容：

1. 确保 Home 控制器中的方法 EditUserProfile 具有足够的参数，并且它们与您的 ajax 方法具有相同的名称。在这种情况下，它们是：folder 和 subId。

2. 删除window.location.reload();，获取data.result，检查是否响应成功。

3. 请看我的代码：

查看

$.ajax({ url: '@Url.Action("EditUserProfile", "Home")', type: "POST", cache: false, data: { folder: Name, subId: id }, success: function(data) { if (data.result == true) // or something { // success } else { // fail } } });

控制器

public JsonResult EditUserProfile(string folder, string subId) {
    // do something

    return Json(new {
        result = true; // false or anything else
    });
}

原因是您对 html 上的数据显示不做任何事情。 Ajax只是帮你调用Controller中的方法，而不是帮你编辑当前的显示数据。

所有你需要做的：

• 为包含您的数据的行分配一个 id

• 在 Ajax 返回成功值后，使用 Jquery 更新该行的内容。

Answer 2

试试 jquery load(),

$('#treeDivBlock').load(" #treeDivBlock", function() { 
     $(this).children().unwrap();
});