2016-08-01 6 views
2

Я хочу использовать ajax для чтения текстового файла и преобразования его в массив, чтобы заполнить поле выбора. Проблема в том, что я не могу понять, почему код ajax не будет работать. Каждый раз, когда я проверить код в Chrome, я получаю эту ошибку из JQuery:Использование Ajax для чтения csv/текстового файла

XMLHttpRequest cannot load file:///C:/filepath.../AttributeCategories.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 

Вот HTML-страница:

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#btn').click(function(){ 
      $.ajax({ 
       type: "GET", 
       url: "AttributeCategories.txt", 
       dataType: "text", 
       success: function (data) { 
        processData(data); 
       } 
      }); 
     }); 

     function processData(data){ 
      var attrcsv = data.split("\n"); //----------------------------------split the csv into rows 
      var ctgyList = attrcsv[0].split(","); //----------------------------split the first row into categories 

      for(var i = ctgyList.length + 1; i > 0; i--){//---------------------trim empty items off the array 
       if(isNaN(ctgyList[i]) == true){ctgyList.splice(i,1);} 
      } 

      $('#sel')[0].options.length = 0;//----------------------------------clear select options 
      for(var i = 0; i < ctgyList.length; i++){//-------------------------build select from the array 
       $('#sel').append($('<option>',{value:i + 1,text:ctgyList[i]})); 
      } 
     } 
    }); 
    </script> 


</head> 
<body> 
    <div> 
     <table> 
      <tr><td><button id="btn">Click Me!</button></td></tr> 
      <tr><td><select id="sel"></select></td></tr> 
     </table> 

    </div> 
</body> 

Все файлы (HTML и текстовый файл) находятся в одной папке. Любая помощь или разъяснение были бы полезны, спасибо.

+0

Вы не можете прочитать локальный файл. – gcampbell

+0

Вы должны разместить свой код на локальном сервере. – Wolfgang

+0

Если вы хотите читать файлы, используйте API-интерфейс чтения файлов в HTML5, и вы можете выполнять обратные вызовы для асинхронного использования. – ODelibalta

ответ

0

Проблема объясняется в сообщении об ошибке. По соображениям безопасности ваш браузер не позволяет вам асинхронно запрашивать URL-адрес из другого домена, чем выполняемая страница («запрос на кросс-исход»). Для получения дополнительной информации см. https://en.wikipedia.org/wiki/Same-origin_policy и https://developer.chrome.com/extensions/xhr.

Смежные вопросы