代码之家 › 专栏 › 技术社区 › Surbhi Singhal

如何在成功发布后更新页面内容而不刷新页面

page-refresh asp.net-mvc-5 ajax jquery c#

Surbhi Singhal · 技术社区 · 6 年前

我有一个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();
                    }

2 回复 | 直到 6 年前

Vietvo 6 年前

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

确保您的方法 EditUserProfile 主控制器中有足够的参数,它们与ajax方法同名。在这种情况下,它们是: 文件夹 和 子ID 。
去除 window.location.reload(); 并获取 data.result 检查响应是否成功。
请查看我的代码:

看法

$.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更新该行的内容。

Anfath Hifans 6 年前

尝试使用jquery load() ,则,

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前