Jquery Ajax Post 后部分视图刷新

Posted 2023-05-07

【中文标题】Jquery Ajax Post 后部分视图刷新

【英文标题】：Partial View Refreshes after Jquery Ajax Post

【发布时间】：2013-04-07 12:07:46

【问题描述】：

在我的 c# MVC4 应用程序中，我使用两个局部视图。部分视图 1 位于 ID 为 Partial_Analysis 的 div 中，部分视图 2 位于 ID 为 Display_Average 的 div 中。每个视图都包含一个 datatables.net 数据表。当在部分视图 1 中的表中选择一行时，会生成一个 jquery ajax 帖子，导致部分视图 2 使用更新的数据表刷新，该数据表显示基于在部分视图 1 中进行的行选择的结果。

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () 
        $('.rowselection').click(function (e) 
            var tdata = $('#form1').serialize();
            $.ajax(
                type: "POST",
                data: tdata,
                url: "Home/PartialAverage",
                success: function (result)  success(result); 
            );
        );

        function success(result) 
            $("#Display_Average").html(result);
        
    );
</script>

当点击特定按钮时，局部视图 1 会刷新。

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () 
        $('#ChangeName').click(function (e) 
            var tdata = $('#form1').serialize();
            var origname = $('#NameDiv').find('input[name="Name"]').first().val();
            var newname = $('#NameDiv').find('input[name="updatedName"]').first().val();
            $.ajax(
                type: "POST",
                data: 
                    mCollection: tdata,
                    Name: origname,
                    updatedName: newname
                ,

                url: "Home/ChangeName",
                success: function (result)  success(result); 
            );
        );


        function success(result) 
            $("#Partial_Analysis").html(result);
        
    );
</script>

在刷新局部视图 1 时，我希望第二个局部视图也刷新。我试过这个会导致无限循环。

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () 
        $('#Partial_Analysis').ajaxSuccess(function (e) 
            var tdata = $('#form1').serialize();
            $.ajax(
                type: "POST",
                data: 
                    mCollection: tdata,
                ,

                url: "Home/PartialAverage",
                success: function (result)  success(result); 
            );
        );


        function success(result) 
            $("#Display_Average").html(result);
        
    );
</script>

【参考方案1】：

ajaxSuccess 是一个全局处理程序，只要收到对 ajax 调用的响应，就会调用它。在其中执行另一个ajax调用肯定会导致无限循环。

这里最好的选择可能是更新第一个部分视图的success 处理程序中的第二个表：

function success(result) 
    $("#Partial_Analysis").html(result);

    reloadDisplayAverage();


function reloadDisplayAverage()    
    var tdata = $('#form1').serialize();
    $.ajax(
        type: "POST",
        data: 
            mCollection: tdata,
        ,
        url: "Home/PartialAverage",
        success: function (result)  success(result); 
    );

    function success(result) 
        $("#Display_Average").html(result);
    

【讨论】：

你可以使用$.post

【参考方案2】：

如果响应是ajax响应...那么

   $.ajax(
                url: 'Home/PartialAverage',
                data: mCollection: tdata,,
                type: 'POST',
                success: function (result) 

                    $("#Display_Average").html(data);
                
            );

这应该对你有用..它对我有用....