Question

我有5个下拉列表，这些列表本质上是动态的。但唯一的问题是所有选项值都是从mysql数据库获取的，我真的希望用户知道查询是在后端发生的，他应该等待显示一个gif或一行说“loading ..”。我一直在寻找这个，其他人发布了类似的问题，但我似乎并没有让它发挥作用。请帮帮我。有人可以提供一个简单的解决方案吗？

感谢。

Answer 1

我在这里举了一个例子：

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，这会将您的演示文稿与数据分离。

Ajax多个下拉列表

1 个答案: