无法在不刷新的情况下运行多个 AJAX 调用答案

【问题标题】：Unable to run multiple AJAX calls without refreshing无法在不刷新的情况下运行多个 AJAX 调用
【发布时间】：2012-06-07 17:08:43
【问题描述】：

我有一个包含文本字段和按钮的表单。当我开始输入时，它会显示来自我的数据库的提示，并在单击按钮或按 Enter 键时显示搜索结果。 AJAX 用于提示和搜索结果，并且运行良好。

问题是它只在页面加载后第一次起作用。如果我想再次搜索，它不会响应。它只是显示之前的搜索结果，直到页面刷新，但showhint() 函数运行良好。

<input type="text" id="txt"  onkeyup="showhint(this.value)"/>
<input type="button" value="search" onclick="searchresult()"/>

AJAX 函数：

function searchresult() {
    var key = document.getElementById("txt").value;
    var xmlhttp;

    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("mid").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("GET","keyprocess.php?q=" + key, true);
    xmlhttp.send();
}

有什么问题？

【问题讨论】：

我不知道谁是版主，我会打开 1000 次直到我不会得到解决方案。如果可以的话，给出解决方案永远不要浪费你的时间在无用的评论上

标签： javascript ajax

【解决方案1】：

我猜测它第一次工作或刷新的原因是因为事件处理程序没有在 ajax 请求之间持续存在。我会研究 jQuery，因为它有助于缓解此类问题。

对于 jquery .delegate() 方法执行以下操作

根据一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

1.7 之后的任何东西都应该使用.on() 方法。

基本上，如果页面上的元素从 ajax 请求发生变化，.delegate() 或 .on() 方法仍然允许处理事件。

更新：

//This needs to be within the $(document).ready function
//Attach an event handler to the ID called txt that fires on changes
$("body").on("change", "#txt", function(event){
    //get the value from the input
    var $val = $(this).val();

    //Send the $val to keyprocess.php via ajax call

    //Output Results

});

【讨论】：

很高兴听到它现在对你有用，牛仔。如果有帮助，请标记为已接受的答案。