Question

我正在使用jQuery load（）方法根据添加到输入字段中的值将内容加载到页面中。出于某种原因，我一次得到多个ajax调用，因此我调用的内容在页面中出现两次而不是一次。

希望有所作为！

以下是我正在处理的代码：

function Acun () { var firstChar = $('#accountnumber').val().charAt(0); if(firstChar != 'x' && firstChar != 'X'){ $('#examplepagecontent').html('<div id="invoice-loader"></div>'); $("#examplepagecontent" ).load( "/product/pay-an-invoice #content"); } else { $('#examplepagecontent').html('<div id="invoice-loader"></div>'); $("#examplepagecontent").load("/product/pay-an-invoice-with-account-z #content"); } }

HTML：

<input type="text" name="Account Number" value=""  
  id="accountnumber" name="accountnumber" onKeyUp="Acun();" maxlength="7"/>

Answer 1

您正在每个keyUp调用该函数。这意味着每次输入一个字符时，当按钮被抬起时，该功能将会运行。

你想尝试这样的事情

var timer;    //important to have variable outside the function
function Acun () {
    window.clearTimeout(timer);
    timer = window.setTimeout(function(){
        var firstChar = $('#accountnumber').val().charAt(0);
        if(firstChar != 'x' && firstChar != 'X'){
             $('#examplepagecontent').html('<div id="invoice-loader"></div>');
             $("#examplepagecontent" ).load( "/product/pay-an-invoice #content");
        }
        else {
            $('#examplepagecontent').html('<div id="invoice-loader"></div>');
            $("#examplepagecontent").load("/product/pay-an-invoice-with-account-z #content");
        }
    },500); //run after a half second of no activity
}

Answer 2

您正在Acun()事件上调用onKeyUp="Acun();"函数。每次用户按下按钮时都会发生此事件。

您应检查其他请求是否处于待处理状态，并且不请求新请求，或者您可以检查textbox输入的长度，并提出最大请求。

使用jQuery Ajax load（）方法进行多次调用时出现问题

2 个答案: