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

How to update page content after success post without page refresh

我有一个 MVC 应用程序,这是我的 ajax 代码。我希望我的页面内容在 success.I 看到很多文章后自动更新而不刷新页面,但我找不到对我有用的东西。我有一个 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();
                    }

试试 jquery load(),

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

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

  1. 确保您的 Home 控制器中的方法 EditUserProfile 有足够的参数,并且它们与您的 ajax 方法同名。在这种情况下,它们是:foldersubId.

  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

  • 使用Jquery更新Ajaxreturn成功值后该行的内容。