AJAX 和数据列表

Question

我正在尝试使用 XML 从网站获取城市列表，然后遍历并将每个城市添加到数据列表中，这样当我输入时，它会过滤列表中的城市。

城市列表示例：

Aleppo
Alexandria
Alger
Almaty
Ankara
Anshan
Baghdad
Baku
Bandung
Bangalore
Bangkok
Barcelona

*[每个城市名称另起一行]

当前 html:

<div id="namearea">
        <h2>City Name:</h2>

        <div>
            <input id="citiesinput" list="cities">
            <datalist id="cities"></datalist>

            <button id="search">
                Search
            </button>

            <span class="loading" id="loadingnames">
                Loading...
            </span>
        </div>
    </div>

当前 JS 代码：

window.onload = function() {
    var request = new XMLHttpRequest();
    request.onload = processCities;
    request.open("GET", "url", true);
    request.send();
};

检查带有 Firebug 的页面显示没有任何内容被添加到数据列表中，所以我想知道我做错了什么。我也尝试使用 .responseText 而不是 .responeXML 但它没有任何区别。

[固定]
我将 processCities() 函数更改为：

function processCities() {
    var response = this.responseText;
    var city = response.split("\n");
    var options = "";

    for(var i = 0; i < response.length; i++) {
        options += "<option value='"+city[i]+"'>\n";
    }
    document.getElementById("cities").innerHTML = options;
}

此代码似乎有效。

Answer 1

这里是发出请求的例子。如果你真的得到 XML，你将不得不解析它。如果能得到json.

就更好了

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

AJAX 和数据列表

AJAX and datalists

javascript

xml

html-datalist