我尝试创建AJAX函数，但它在输出中没有显示任何内容
我尝试创建AJAX函数，但它在输出中没有显示任何内容
提问于 2018-03-20 21:00:34
我尝试创建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文件中获取建议的名称。但是在调用showHint()之后，responseAjax似乎获得了值，请帮助我。
回答 2
Stack Overflow用户
发布于 2018-03-20 21:47:25
onreadystatechange的处理程序中的this是XMLHttpRequest的一个实例，所以this.responseAjax = this.responseText这行代码会将一个字段添加到XMLHttpRequest对象中，并将其值设置为同一对象中的另一个字段。这是完全多余的。在showHint中，xhttp是ajaxObj的一个实例，并且没有为该对象定义过任何代码字段。您可以直接设置< responseAjax >D9元素的innerHTML，该元素在onreadystatechange的处理程序中显示建议，如下所示：
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);
}Stack Overflow用户
发布于 2018-03-20 22:17:57
您需要异步处理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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49384906
复制相关文章
相似问题
腾讯云开发者
