php - Jquery 解析 XML 文件

Question

我从本网站的另一个示例中获得了以下代码。这是在同一脚本中读取 XML 数据。

我如何将 XML 移动到外部页面并让该脚本读取它？ php 和 XML 文件将位于服务器上的同一位置。

我尝试过的所有方法都导致了未捕获错误:无效的'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 数据保存在 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
    });
});