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

Unable to run multiple AJAX calls without refreshing

本文关键字：运行 AJAX 调用 情况下 刷新      更新时间：2023-09-26

我有一个包含文本字段和按钮的表单。当我开始键入时，它会显示来自我的数据库的提示，单击按钮或按回车键时，它会显示搜索结果。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();
}

问题出在哪里？

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

对于 jquery

根据

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

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
});
相关文章：