Question

我正在使用ajax根据在文本框中输入的输入来获取表的行数据。

在我的例子中，密码输入'1000'获取10个位置行，输入'10007'获取一行。

以下是js代码

 $('#pincode').keyup(function(event){
    var currentElementId = $(this).attr('id');
    enterlocation = document.getElementById(currentElementId).value;
    var len = enterlocation.length;

    if (len != null && len > 2 && event.which != 8) {
    var lastRequestTimeStamp = new Date().getTime();
        $.ajax({
            type : "GET",
            url : "/abc.htm",
            cache : false,
            contentType : "application/json;charset=utf-8",
            dataType : 'json',
            data : {
                searchKey : enterlocation, lastRequestTimeStampSent : lastRequestTimeStamp},
            beforeSend : function() {
                $("#mytable").remove();
            },
            success : function(response) {
            var locations = response;
            var sentTimeStamp = parseInt(lastRequestTimeStamp, 10);
            var recievedTimestamp = parseInt(locations[0].requestTimeStamp, 10);
                $("#mytable").show();
                var locations = response;

                if (currentElementId == "pincode") {
                    $("#div1").append('<table id="mytable"></table>');
                }
                if (currentElementId == "city") {
                    $("#div2").append('<table id="mytable"></table>');
                }
                if (currentElementId == "street") {
                    $("#div3").append('<table id="mytable"></table>');
                }


                if ((sentTimeStamp == recievedTimestamp) && locations != null && locations.length > 0) {
                    $.each(locations, function(index, location) {
                        var locationRow = '<tr id="locationRowId'+index+'">' +
                        '<td>' +    
                        '<input type= "hidden" id ="hSugAddrLine1'+index+'" name ="hSugAddrLine1'+index+'" value="'+replaceNullwithBlank(location.addressLine1)+'">' +
                        '</td></tr>';

                        if ($("#mytable").children().length == 0) {
                            $("#mytable").append(locationRow);
                        } else {
                            $("#mytable").find('tbody:last').append(locationRow);
                        }
                    });
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert("@Error");
                console.log(textStatus, errorThrown);
            },
            complete : function() {
                $("#mytable").show();
                //$("#mytable").table("refresh");
            }
        });
    }

});

当我在输入框中快速输入10007时，我在表中得到的是大多数情况下pincode'1000'的响应数据或者在某些情况下pincode'100'的响应数据。

但是当我在输入文本框中慢慢输入'10007'时，我在表格中得到了正确的ajax响应数据，意思是输入'10007'。

在我看来，渲染速度很慢。如上所述，输入'1000'响应数据大于'10007'的响应数据，所以我认为即使在下一个ajax调用响应呈现之后，之前的ajax调用更大的数据也会在表上呈现。作为jquery和ajax的新手和天真，我在这里头脑风暴。求救！

Answer 1

你的服务器太快了......每个键盘。这将导致任何大量使用的问题。您可能想要做的是在发生键盘事件时设置计时器，然后在调用计时器时执行AJAX调用。将计时器设置为1秒钟，以便在按键1秒钟后进行呼叫。这将减少额外的电话。

此外，为服务器返回的ajax调用分配一个时间戳id也没有什么坏处，这样你就可以在填充结果时只使用最后发送的AJAX调用。

动态Jquery表使用文本框的每个keyup事件的ajax响应数据构建，不显示最后一个ajax响应的数据（最后一个keyup）

1 个答案: