Question

您好

我正在尝试为输入字段执行自动完成功能。

伪代码

<input type="text"/>

<script>
 var ref,resp;//Global Variables

$('input').live('keyup',function(){
   /* Get the input offset, so that list container can be palced at the bottom of the input once get the values through Ajax call */

  ajaxCall();

 /***
  Here I want to write a code to create a div and place the values with in the div and show at the respective input field.
 ***/

});

function ajaxCall(){
var ref  = new XMLHttpRequest();
  ref.open();
  ref.readStateChange = function(){
    if(ref.readyState == 4 && ref.status ==200)
       resp = ref.responseText();
  }
  ref.send();
}

</script>

我遇到的问题是，ajax readyState为4并且值被重新执行后，应该执行ajax调用之后的代码部分。

但是当readyState为1（未在其他状态之后调用）时，正在执行该代码，其中未从数据库中检索值。让我无法显示列表。

注意：我知道下面的部分可以放在ajaxCall中，但它包含一些可以在这个地方设置的变量....

我的问题有意义吗？如果是这样，有些人可以让我知道解决方案......

Answer 1

在AJAX回调期间，您必须调用依赖于AJAX调用结果的函数。就是这样：

function ajaxCall(callback) {
    var ref = new XMLHttpRequest();
    ref.open();
    ref.readStateChange = function() {
        if (ref.readyState === 4 && ref.status === 200) {
             resp = ref.responseText();
             callback.call(null, ref.responseText); // invoke the callback here
        }
    }
    ref.send();
}

然后：

ajaxCall(function(resp) {
    // handle "resp" here
});

那就是说，请不要重新发明轮子。您将最终得到难以维护且无法跨浏览器移植的代码。有很多库使这样的AJAX代码完全轻而易举。我使用jQuery。

Answer 2

您希望在完成ajax调用后运行的代码应该放在代码的onSuccess（）或onComplete（）方法中。

ajaxCall(function(resp) {


    /***
      Here I want to write a code to create a div and place the values with in the div and show at the respective input field.
     ***/
});

，即你的代码的这一部分必须在onComplete（）方法中，它将把ajax调用返回的数据作为参数。

在Ajax事件之后调用其余的javascript

2 个答案: