2015-09-02 4 views
0

У меня есть следующий код, настроенный для ссылки на внешний XML-файл и автозаполнение и возвращающее значение. Он не работает независимо от того, жестко ли я кодирую элемент данных, как вы видите ниже, или если я комментирую данные: элемент out. Я попытался изменить Type: from Post для Get в обоих сценариях. Я также подтвердил, что .xml указан в указанном URL-адресе, а также попробуйте просто поместить его в тот же каталог, что и файл .php, который вы видите ниже. На веб-сервере также не генерируются ошибки.Autocomplete jQuery удаленный XML-файл

<!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> 

ответ

1

Если вы можете открыть удаленный URL непосредственно в браузере или браузер аддон, но не с помощью Ajax, политику единства происхождения и отсутствуют CORS заголовки являются наиболее вероятной причиной.

Удаленный ресурс должен предоставить CORS headers. В противном случае браузер не откроет его в объекте XHR (jQuery.ajax() использует XHR внутренне).

Откройте вкладку сети инструментов разработчика в своем браузере, чтобы проверить заголовки запроса/ответа.

+0

Что делать, если я поместил xml в тот же каталог, что и .php, и не ссылаюсь на него как на http: и просто url: «file.xml», ... который не работает? –

+1

Каталог не имеет значения (это серверная сторона). Запрос Ajax должен перейти в тот же домен. (Относительный URL-адрес использует тот же домен). Если домен отличается, вам нужны заголовки CORS. Вам нужно отладить запрос/ответ с помощью инструментов разработчика браузера. – ThW

+0

Удивительный, спасибо за помощь! Я читал в заголовках, как вы указали, и теперь это имеет смысл. Ваши ссылки привели меня сюда, и я в конечном итоге использовал его. Еще раз спасибо! https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control –