页面在删除时不会在 jquery ajax 中隐式刷新

page is not refreshing implicitly in jquery ajax while deleting

本文关键字：ajax 刷新 jquery 删除更新时间：2023-09-26

我有两个ajax jquery函数来添加，显示和删除表中的数据，删除在添加数据时工作正常，但仅在刷新时显示，我该如何解决这个问题？

<script type="text/javascript">
$(document).ready(function() {
    (function ($) {z
        $.fn.serializeFormJSON = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
    })(jQuery);
    $('form').submit(function (e) {
        e.preventDefault();
        var data = $(this).serializeFormJSON();
        console.log(data);
        console.log(JSON.stringify(data));
         $.ajax({
             type: "POST",
             contentType: "application/json",
         url: "createajaxuser",
         data:JSON.stringify(data),
         dataType: "json",
         success: function(result) {
            a    
         }
     });
    });

    $.ajax({
        url: 'listusersjson',
        type: 'GET',
        success: function(response) {
            var trHTML = '';
            var count =0;
            $.each(response, function(i, item) {
                console.debug("i is"+i);
                var success="success";
                var danger="danger";
                var info="info";
                 var color ;
                 if(count==0)
                     {
                     color =success;
                     count++;
                     }else if(count==1){
                         color =danger;
                         count++;
                     }else{
                         color =info;
                         count=0;
                     }
                trHTML += '<tr class="'+color+'" ><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.password +  '</td><td>' + item.email+
                    '</td><td>' + '<button type="button" class="btn btn-danger" id="' + item.id + '" >Delete</button>'
                '</td></tr>';
            });
            $('#delTable').append(trHTML);
            $('button').click(function() {
               var val = $(this).attr("id");
               console.debug("saurabh userid", val);
               var rowElement = $(this).parent().parent();
               $.ajax({
                    type: "DELETE",
                url: "ajaxuserr/"+val,
                success: function(result) {
                    rowElement.find('td').fadeOut('3000',
                        function() {
                            rowElement.remove();
                        }
                    );
                }
            });
        });
        }
    });
});
</script>

</head>
<body>
    <form action="#" method="post">
        <div>
            <label for="name">Name</label> <input type="text" name="name"
                id="name" />
        </div>
        <div>
            <label for="email">Email</label> <input type="text" name="email"
                id="email" />
        </div>
        <div>
            <label for="password">Password</label> <input type="password"
                name="password" id="password" />
        </div>
        <p>
            <input type="submit" value="Send" />
        </p>
    </form>
    <div class="container">
        <table class="table table-bordered table-hover" id="delTable">
            <thead>
                <tr>
                    <th width="100">Name</th>
                    <th width="100">ID</th>
                    <th width="100">Password</th>
                    <th width="100">Email</th>
                    <th width="100">Delete</th>
                </tr>
            </thead>

            </tbody>
        </table>
    </div>

我发布这个答案是因为当我试图在评论中解释时你会感到困惑，

因此，最初将构建表主体的 ajax 调用放入一个新函数中，如下所示。

  function GetListOfUsers(){
    $.ajax({
        url: 'listusersjson',
        type: 'GET',
        success: function(response) {
            var trHTML = '';
            var count =0;
            $.each(response, function(i, item) {
                console.debug("i is"+i);
                var success="success";
                var danger="danger";
                var info="info";
                 var color ;
                 if(count==0)
                     {
                     color =success;
                     count++;
                     }else if(count==1){
                         color =danger;
                         count++;
                     }else{
                         color =info;
                         count=0;
                     }
                trHTML += '<tr class="'+color+'" ><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.password +  '</td><td>' + item.email+
                    '</td><td>' + '<button type="button" class="btn btn-danger" id="' + item.id + '" >Delete</button>'
                '</td></tr>';
            });
            $('#delTable tbody').append(trHTML); //Note I am trying to append into tbody you were directly appending to table without tbody
            $('button').click(function() {
               var val = $(this).attr("id");
               console.debug("saurabh userid", val);
               var rowElement = $(this).parent().parent();
               $.ajax({
                    type: "DELETE",
                url: "ajaxuserr/"+val,
                success: function(result) {
                    rowElement.find('td').fadeOut('3000',
                        function() {
                            rowElement.remove();
                        }
                    );
                }
            });
        });
        }
    });
});
}

然后你可以在表单提交ajax调用的成功方法中调用此方法。

$('form').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeFormJSON();
    console.log(data);
    console.log(JSON.stringify(data));
     $.ajax({
         type: "POST",
         contentType: "application/json",
     url: "createajaxuser",
     data:JSON.stringify(data),
     dataType: "json",
     success: function(result) {
         $('#delTable tbody').html(''); //empty the tbody
        GetListOfUsers();   // call this function so that it rebuilds the tbody
     }
 });
});

此外，由于现在我们将构建 tbody 的 ajax 调用移动到一个新函数中，因此您必须在初始脚本加载中调用一次。这样它就可以建立身体。因此，您可以将这行代码放在表单提交事件处理程序之后 GetListOfUsers();