我有5个下拉列表,这些列表本质上是动态的。但唯一的问题是所有选项值都是从mysql数据库获取的,我真的希望用户知道查询是在后端发生的,他应该等待显示一个gif或一行说“loading ..”。 我一直在寻找这个,其他人发布了类似的问题,但我似乎并没有让它发挥作用。请帮帮我。有人可以提供一个简单的解决方案吗?
感谢。
答案 0 :(得分:0)
我在这里举了一个例子:
http://jsfiddle.net/cMEaM/embedded/result/
我保留了尽可能多的现有代码,所以你仍然应该认识它。 getXMLHTTP
函数是相同的:
function getXMLHTTP() {
//function to return the xml http object
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
xmlhttp = false;
}
}
}
return xmlhttp;
}
有一个新的sendGet
函数来处理XHR请求,它接受成功和错误回调。
function sendGet(url, onSuccess, onError) {
var req = getXMLHTTP();
var method = "GET";
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
onSuccess(req);
} else {
onError(req);
}
}
}
req.open(method, url, true);
req.send(data);
}
}
我借用throbber from Wikipedia来显示加载数据的时间。
var throbberHtml = "<img src='http://upload.wikimedia.org/wikipedia/en/2/29/Throbber-Loadinfo-292929-ffffff.gif'>";
这些是新的getXXX
函数,可以在加载数据时将<select>
替换为throbber:
function getState(countryId) {
var div = document.getElementById('statediv');
var oldInnerHTML = div.innerHTML;
var onSuccess = function(req) {
div.innerHTML = req.responseText;
};
var onError = function(req) {
div.innerHTML = oldInnerHTML;
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
};
div.innerHTML = throbberHtml;
sendGet("findState.php?country=" + countryId, onSuccess, onError);
}
function getCity(countryId, stateId) {
var div = document.getElementById('citydiv');
var oldInnerHTML = div.innerHTML;
var onSuccess = function(req) {
div.innerHTML = req.responseText;
};
var onError = function(req) {
div.innerHTML = oldInnerHTML;
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
};
div.innerHTML = throbberHtml;
sendGet("findCity.php?country=" + countryId + "&state=" + stateId,
onSuccess, onError);
}
还可以进行其他改进,但我尽可能地保持现有代码的精神。
E.g。您可以看到getXXX
函数中的大多数代码都是相同的,因此您可以重构这些代码以使用大部分相同的代码。此外,使用诸如jQuery之类的JS框架将用更好,更跨浏览器兼容的代码替换XHR代码。在代码方面,避免重新发明轮子通常总是更好!
您可能认为发送<select>
标记的HTML不是XHR的最佳数据格式。您可以使用JSON,这会将您的演示文稿与数据分离。