我尝试创建 AJAX 函数，但它在输出中显示注释

我试图创建 AJAX 函数，但它在输出中显示注释

var ajaxObj = function(url, meth, data = "") {
                var x = new XMLHttpRequest();
                x.onreadystatechange = function() {
                    if (x.readyState == 4 && x.status == 200) {
                        this.responseAjax = this.responseText;
                    }
                }
                x.open(meth, url, true);
                x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                x.send(data);
    
            }
    
            function showHint(str) {
                var xhttp = new ajaxObj("gethint.php?q=" + str, "GET");
                if (str.length == 0) {
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                }
                document.getElementById("txtHint").innerHTML = xhttp.responseAjax;
            }

<!DOCTYPE html>
    <html>
    
    <body>
    
        <h3> Start typing a name in the input field below :</h3>
    
        <form action="">
            First Name : <input type="text" id="txt1" onkeyup="showHint(this.value)">
    </form>
    
        <p>Suggestions:
            <sapn id="txtHint"></sapn>
        </p>
        
    </body>
</html>

当用户开始在文本框中键入时，我试图从gethint.php文件中获取建议的名称。但似乎响应Ajax在showHint((调用后获得了价值，请帮助我。

您需要异步处理 AJAX 请求。在调用时showHint函数中

document.getElementById("txtHint").innerHTML = xhttp.responseAjax;

AJAX 调用尚未返回，因此尚未定义 xhttp.responseAjax 对象。您需要等待响应到达后处理它。您可以将回调函数传递给ajaxObj定义，对象将在获得响应时调用该函数。

var ajaxObj = function(url, meth, callback, data = "") {
    var x = new XMLHttpRequest();
    x.onreadystatechange = function() {
        if (x.readyState == 4 && x.status == 200) {
            // we're ready to handle the response data now
            callback(x.responseText);
        }
    }
    x.open(meth, url, true);
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    x.send(data);
}
// Callback function to be invoked when AJAX is complete
function fillTxtHint(responseHtml)
{
    document.getElementById("txtHint").innerHTML = responseHtml;
}
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
    }
    // Pass in the callback function to be invoked when AJAX has returned
    ajaxObj("gethint.php?q=" + str, "GET", fillTxtHint);
}

onreadystatechange处理程序中的this是XMLHttpRequest的实例，因此行this.responseAjax = this.responseText将字段添加到XMLHttpRequest对象并将其值设置为同一对象中的另一个字段。这完全是多余的。在showHint中，xhttp是ajaxObj的一个实例，并且没有为这个对象定义responseAjax字段。您可以直接在onreadystatechange处理程序中设置显示建议的元素innerHTML，如下所示：

function getSuggestions (meth, data) {
    meth = meth.toUpperCase();
    var params = "q=" + data;
    var url = (meth == "GET") ? "gethint.php?" + params : "gethint.php";
    var elem = document.getElementById("txtHint");
    if (data.length == 0) {
        elem.innerHTML = "";
        return;
    }
    var x = new XMLHttpRequest();
    x.onreadystatechange = function() {
        if (x.readyState == 4 && x.status == 200) {
            elem.innerHTML = this.responseText;
        }
    }
    x.open(meth, url, true);
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    if (meth == "GET") { 
        x.send(); 
    } else { 
        x.send(params); 
    }
}

showHint变成：

function showHint(str) {
    getSuggestions ("GET", str);
}

相关内容

最新更新

热门标签：