Question

我已经构建了一个函数 getuser（），其中我将json数据从php接收到javascript中。文档准备好后我调用此函数。我的问题是我也使用jquery post来对该记录进行实时更新，因此我必须再次调用该函数 getuser（），因为它显示了重复的结果。首先，文档在jquery post函数上准备好了socend。

HTML

   <!--It has onclick event-->

  <button type="submit"  class="btn btn-primary modify" onclick="update_user()">UPDATE</button>

JQUERY

//This is function which gets json array from php
function getuser() {
    $.get("getuser.php", function (data) {
        var data = JSON.parse(data);
        for (var i = 0, len = data.length; i < len; ++i) {
            var student = data[i];
            var slash = " / ";
            $("#output").append("<tr><td>" + student.name + "</td><td>" + student.gender + "</td><td>" + student.age + "</td>" +
                "<td>" + student.city + "</td><td><a href='#' style='text-decoration: none'  class='update' id='" + student.id + "' onclick='reply_click(this.id)'>Update</a>" + slash + "<a style='text-decoration: none' href='#'>Delete</a></td></tr>");
        }
    });
}

//when document gets ready it will show the record
if($(document).ready()) {
    //   getuser();
    getuser();
}


//This is jquery post. When I click button (in html section) it will get form values and sent to php page
    //in return it will call getuser() function again which results of duplicate display of record

$(document).ready(function(){

    $('.modify').click(function() {
        var gender = '';
        if($('.male').is(':checked')){


            gender='Male';

        }else{


            gender='Female';
        }
        $.post("update.php",
            {name: $('.name').val(),gender:gender,city:$('.city').val(),age:$('.age').val(),id:$('.id').val()},
            function (data) {
                //here is the function  call again
                getuser();

            }
        );
    });
});

亲爱的告诉我，有什么方法可以避免在post函数中进行第二次调用，并且记录会在没有函数调用的情况下进行更新。我需要避免重复的结果。提前谢谢！

Answer 1

首先，您需要阅读jquery document ready上的文档，并了解函数引用与实际调用函数之间的区别。 document.ready希望您在页面准备好时将函数定义传递给。它并没有主动告诉您页面是否准备就绪，这是您调用它的第一种方式。你调用它的第二种方式实际上是正确的。

其次，将$("#output").append替换为$("#output").html，每次都会更新/替换该元素的内容，而不是仅添加更多内容。

Answer 2

您的if测试将始终返回true，因为document.ready返回JQuery对象。因此，您始终会调用getuser()。

您可以在此处查看document.ready()的返回值：

＆＃13;

console.log($(document).ready());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

这是document.ready()的错误用法。您不需要为document.ready编写测试，只需为该事件编写回调函数，并让浏览器为您正确执行。

<强> Read the docs on document.ready()

<强>解决方案：

这：

//when document gets ready it will show the record
if($(document).ready()) {
    //   getuser();
    getuser();
}

应该是这样的：

//when document gets ready it will show the record
$( document ).ready(getuser);

甚至：

$(getuser);

至于第二次获得结果，只需覆盖旧结果而不是附加结果。

这：$("#output").append(...

应该是：$("#output").html(...

Answer 3

大家都感谢您的建议。我在这里找到了解决方案，只需在循环之前在$("#tbody").html('');中添加getuser()即可。
这是适用于我的代码

 function getuser() {
    $.get("getuser.php", function (data) {
        var data = JSON.parse(data);
        $("#tbody").html('');//newly added

        for (var i = 0, len = data.length; i < len; ++i) {
            var student = data[i];
            var slash = " / ";
                           $("#output").append("<tr><td>" + student.name + "</td><td>" + student.gender + "</td><td>" + student.age + "</td>" +
                "<td>" + student.city + "</td><td><a href='#' style='text-decoration: none'  class='update' id='" + student.id + "' onclick='reply_click(this.id)'>Update</a>" + slash + "<a style='text-decoration: none' href='#'>Delete</a></td></tr>");
        }
    });
}

大家再次感谢！

避免在jquery中重复的函数调用？

3 个答案: