自动完成 jQuery 远程 XML 文件答案

【问题标题】：Autocomplete jQuery remote XML file自动完成 jQuery 远程 XML 文件
【发布时间】：2015-09-02 20:52:07
【问题描述】：

我将以下代码配置为引用非现场 XML 文件并自动完成并返回值。无论我是像您在下面看到的那样对数据元素进行硬编码还是将 data: element 注释掉，它都不起作用。在这两种情况下，我都尝试将 Type: 从 Post 更改为 Get。我还确认 .xml 位于指定的 URL 路径中，并尝试将其简单地放在与您在下面看到的 .php 文件相同的目录中。网络服务器上也不会产生错误。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title></title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">

  <style type='text/css'>
    .red {color: red}
  </style>
  <script type='text/javascript'>

$(window).load(function(){
$.ajax({
    url: "domain/file.xml", 
    type: "POST", 
    dataType: "xml", 
    data: {
        xml: "<geonames><geoname><name>London</name><geonameId>2643743</geonameId><countryCode>GB</countryCode><countryName>United Kingdom</countryName></geoname><geoname><name>London</name><geonameId>6058560</geonameId><countryCode>CA</countryCode><countryName>Canada</countryName></geoname><geoname><name>The Tower of London</name><geonameId>6286786</geonameId><countryCode>GB</countryCode><countryName>United Kingdom</countryName></geoname></geonames>"
    }, //should not need to define 'data' on your own xml call
    success: function(xmlResponse) {
        var data = $("geoname", xmlResponse).map(function() {
            return {
                value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
                id: $("geonameId", this).text()
            };
        }).get();
        $("#test").autocomplete({
            source: function(req, response) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp("^" + re, "i");
                response($.grep(data, function(item) {
                    return matcher.test(item.value);
                }));
            },
            minLength: 2,
            select: function(event, ui) {
                $("p#result").html(ui.item ? "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : "Nothing selected, input was " + this.value);
            }
        });
    }
});
});//]]> 

</script>

</head>
<body>
<p  class="ui-widget">Try typing 'Lo' it will match on 'London'.</p>

<div class="ui-widget">
    <label for="test">London matches: </label>
    <input id="test" />
</div>

<p id="result" class="ui-widget red"></p>


</body>

</html>

【问题讨论】：

标签： php jquery xml

【解决方案1】：

如果您可以直接在浏览器或浏览器插件中打开远程 URL，但不使用 Ajax，则最可能的原因是同源策略和缺少 CORS 标头。

远程资源必须提供CORS headers。否则浏览器不会在 XHR 对象中打开它（jQuery.ajax() 内部使用 XHR）。

在浏览器中打开开发者工具的网络标签，检查请求/响应标头。

【讨论】：

如果我将 xml 放在与 .php 相同的目录中并且不将其作为 http: 引用而只是 url: "file.xml", ...... ?
目录不相关（即服务器端）。 Ajax 请求必须转到同一个域。（相对 URL 使用相同的域）。如果域不同，则需要 CORS 标头。您需要使用浏览器的开发者工具调试请求/响应。
太棒了，感谢您的帮助！我按照您的要求对标题进行了一些阅读，现在这很有意义。你的链接把我带到了这里，我最终使用了。再次感谢！ developer.mozilla.org/en-US/docs/Web/HTTP/…