JQuery Parse XML-файл

Question

У меня есть следующий код из другого примера на этом сайте. Это считывает данные XML из одного сценария.

Как перенести XML на внешнюю страницу и прочитать этот скрипт? Оба файла php и XML будут находиться в одном и том же месте на сервере.

Все, что я пробовал, привело к ошибке Uncaught: Invalid 'test.xml' сообщений.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 

    var select = $('#ID'), 
     xml = $($.parseXML($('#XMLData').text())), 
     plans = xml.find('plan'); 

    plans.each(function() { 
     var ID = $(this).find('ID').text(); 
     select.append("<option>" + ID + "</option>"); 
    }); 

    $("#ID").change(function() { 
     var selectedIndex = $('#ID option').index($('#ID option:selected')), 
      plan = $(plans[selectedIndex]); 

     $('#planNumber').val(plan.find('planNumber').text()); 
     $('#Area').val(plan.find('Area').text()); 
     $('#Name').val(plan.find('Name').text()); 
     $('#Description').val(plan.find('Description').text()); 
     $('#Station_ID').val(plan.find('Station_ID').text()); 

     $('#code').val(plan.find('code').text()); 
     $('#County').val(plan.find('County').text()); 
    }).trigger('change'); 
}); 
</script> 

<script type='text/xml' id='XMLData'> 
    <XMLReview> 
    <plan> 
     <planNumber>773</planNumber> 
     <Area>Upper Missouri</Area> 
     <ID>MISSOURI-NUT</ID> 
     <Name>Missouri River</Name> 
     <code>10030101</code> 
     <County>Broadwater</County> 
     <Station_ID>M09MISSR05</Station_ID> 
    </plan> 
    <plan> 
     <planNumber>774</planNumber> 
     <Area>Columbia</Area> 
     <ID>FLAT-STILL-TPA-2013</ID> 
     <Name>Sheppard Creek</Name> 
     <Description>- 3A</Description> 
     <code>17010210</code> 
     <County>Flathead</County> 
     <Station_ID>C09SHEPC04</Station_ID> 
    </plan> 
    </XMLReview> 
</script> 
<form> 
    ID <select type="text" name="ID" id="ID"></select><br/> 
    planNumber<input type="text" name="Name" id="planNumber"><br/> 
    area<input type="text" name="Area" id="Area"><br/> 
    Name: <input type="text" name="Name" id="Name"><br/> 
    Description: <input type="text" name="Description" id="Description"><br/> 
    Station ID <input type="text" name="Station_ID" id="Station_ID"><br/> 
    <label class="Code-label" for="code">HUC</label> 
    <select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid"> 
     <option></option> 
     <option>10010001</option> 
     <option>10010002</option> 
     <option>10020001</option> 
     <option>10030101</option> 
     <option>17010210</option> 
    </select> 
    <br/> 
    <label class="county-label" for="County">County</label> 
    <select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid"> 
    <option></option> 
    <option>Beaverhead</option> 
    <option>Big Horn</option> 
    <option>Blaine</option> 
    </select> 
</form> 

Благодаря

Answer 1

Сохранить ваши xml data только в test.xml, а затем попробовать это,

$(function(){ 
    var select = $('#ID'); 
    function renderData(xml,plans){ 
     plans.each(function() { 
      var ID = $(this).find('ID').text(); 
      select.append("<option>" + ID + "</option>"); 
     }); 

     select.change(function() { 
      var selectedIndex = $('#ID option').index($('#ID option:selected')), 
       plan = $(plans[selectedIndex]); 

      $('#planNumber').val(plan.find('planNumber').text()); 
      $('#Area').val(plan.find('Area').text()); 
      $('#Name').val(plan.find('Name').text()); 
      $('#Description').val(plan.find('Description').text()); 
      $('#Station_ID').val(plan.find('Station_ID').text()); 

      $('#code').val(plan.find('code').text()); 
      $('#County').val(plan.find('County').text()); 
     }).trigger('change'); 
    } 

    $.get('test.xml',function(data){/// get the xml data from test.xml 
     xml = $($.parseXML(data));// parse the data to xml 
     plans= xml.find('plan');// find plans from xml 
     renderData(xml,plans);// call renderdata function to render elements 
    }); 
}); 

Answer 2

Вы можете использовать AJAX для загрузки внешнего файла XML (скажем data.xml) в документ затем прочитать его с помощью JavaScript. добавьте эту строку в $(document).ready(function() {:

$('#result').load('data.xml'); 

и добавьте в ваш HTML тела

<div id='result'></div> 

Answer 3

Просто используйте методы Ajax:

$.get(url) 
    .done(
    function (xml) { 
     var $xml = $(xml); 
     var plans = $xml.find('plan'); 
     ... 
    } 
); 

Если веб-сервер предоставляет файл в формате XML (Content -Type) jQuery вернет его в документе DOM. Оберните его в объект jQuery и используйте селектор CSS для извлечения данных.