從XML填充jquery表單

Question

我試圖用來自XML的數據填充一個jQuery表單，其中XML具有一個ID，該ID將填充該表單的下拉列表，並且在選擇ID后，將填充其他表單字段。 順便說一句我不會使用PHP

我的XML

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

HTML

<form>
 <input type="button" id="btnxml" value="XML" onclick="getXML()" />

   ID <input type="text" name="ID" id="ID">       
   planNumber<input type="text" name="Name" id="planNumber"> 
   area<input type="text" name="Area" id="Area">
   Name:  <input type="text" name="Name" id="Name">
   Description:  <input type="text" name="Description" id="Description">
   Station ID  <input type="text" name="Station_ID" id="Station_ID">
   <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>
    </select>
   <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>

劇本

<script>
  function getXML()
 {
 $.get("XMLReview.xml", function(data) {
  $.ajax({
    type: "GET",
    url: "XMLReview.xml",
    dataType: "xml",
    success: function (xml) {
      var select = $('#ID');
        $(xml).find('plan').each(function () {
        var ID = $(this).find('ID').text();
        select.append("<option>" + ID + "</option>");
        $("#ID").change(function () {
            var selectedIndex = $('#ID option').index($('#ID option:selected'));
            var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                var value = $(this).text();
            });
         });
      }
    }); 
  alert(data);});
 }

</script> 

不幸的是，這不起作用，我也不知道為什么。 誰能幫我

Answer 1

一兩件事：

您正在內聯指定onclick事件：

<input type="button" id="btnxml" value="XML" onclick="getXML()" />

為什么不將所有內容都放在一個地方-因為您已經在使用很多jQuery。 只需將其添加到javascript塊中，如下所示：

<input type="button" id="btnxml" value="XML" />

和

$('#btnxml').click(function() {
    getXML();
});

---

如果不檢查您的javascript / ajax代碼，這種構造是錯誤的：

function getXML(){
    $.get("XMLReview.xml", function(data) {   <<======= REMOVE
        $.ajax({
            type: "GET",
            url: "XMLReview.xml",
            dataType: "xml",
            success: function (xml) {
                var select = $('#ID');
                $(xml).find('plan').each(function () {
                    var ID = $(this).find('ID').text();
                    select.append("<option>" + ID + "</option>");
                    $("#ID").change(function () {
                        var selectedIndex = $('#ID option').index($('#ID option:selected'));
                            var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                            var value = $(this).text();
                        }); //END $(xml).find.eq.find.each
                    }); //END #ID.change
                }); //END $(xml).find.each
                alert(data);
            } //END AJAX.success fn
        }); //END $.ajax
    }); //END $.get  <<=================================== REMOVE
}

它看起來應該像這樣：

function getXML(){
    $.ajax({
        type: "GET",
        url: "XMLReview.xml",
        dataType: "xml",
        success: function (xml) {
            var select = $('#ID');
            $(xml).find('plan').each(function () {
                var ID = $(this).find('ID').text();
                select.append("<option>" + ID + "</option>");
                $("#ID").change(function () {
                    var selectedIndex = $('#ID option').index($('#ID option:selected'));
                        var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                        var value = $(this).text();
                    }); //END $(xml).find.eq.find.each
                }); //END #ID.change
            }); //END $(xml).find.each
            alert(data);
        } //END AJAX.success fn
    }); //END $.ajax
}

不需要額外的$ .get（）包裝器。

請注意， $.ajax()和$.get()以及$.post()執行相同的操作。 您正在使用更具結構化的$.ajax()構造，該構造更易於（IMHO）保持順直。

$.get()只是硬編碼type="GET"而$.post()硬編碼type="POST"

---

另外，我對XML數據類型還沒有做很多事情，但是我強烈懷疑xml在這種情況下，在您的AJAX代碼塊的成功函數中：

success: function (xml) {
    //post ajax code here, for eg.
    alert(xml);
}

變量是否包含服務器端腳本中已回顯/打印/等的內容？ 我不相信這是一個XML object ...

Answer 2

好的，這里發生了很多事情，所以我認為一個新的實現比一系列更容易理解（我將嘗試指出您對JavaScript的理解可能需要一些工作的地方）。首先是一個演示 。 現在的JavaScript：

$('#btnxml').on('click', 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');
});

然后是HTML

<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>
    <input type="button" id="btnxml" value="XML" /><br/>
    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>

首先，我進行了這些更改，以使其在JSFiddle中更易於演示，但是它們不一定與最終代碼相同：

• 我偽造了AJAX請求（此處的另一個答案為您提供了有關如何正確使用jQuery出色的AJAX幫助器方法的清晰說明）。 將這個答案匯總到您的答案中時，您可以假設所有這些都包裝在$.get() ，該$.get()可以遠程獲取XML。
• 我還將JavaScript中處理的click綁定到$('#btnxml') （這是更干凈的方法，但是因為JSFiddle不喜歡指向命名函數的onclick屬性），這並不是完全錯誤的，它只是更干凈。

現在進行實質性更改：

• 您實際上是在嘗試做兩件事，填充您的$('#ID')選擇器（最初是不正確的<input type='text'> ，在此代碼中，我將更新為<select> ）在它填充后，您嘗試綁定一個change事件處理程序。您將這些步驟相互.trigger('change') ，而我.trigger('change')它們分開了。另外，以編程方式更改<select>不會自動觸發更改事件，因此我附加了.trigger('change')結尾。
• 看來您正在嘗試獲取所選計划的子節點，並用相同的名稱更新相應的input 。 您可以使用.childNodes屬性，但這將包括XML節點之間所有空白的TextNodes ，而不是嘗試將其過濾掉，我認為單獨映射它們會更干凈。 如果您的HTML和XML不斷更新，那么這可能對您不起作用，但是我接下來要說的那點還是會阻止全自動的方法。
• 基於值選擇選項提出了一些挑戰。 jQuery非常聰明。 如果您的<select>元素帶有一組不具有value屬性的選項，並且嘗試通過該元素內的那些<option>之一的字符串設置該<select>元素的.val() ，它將做正確的事。 但是，如果沒有與該值匹配的元素，則它將以靜默方式傳遞給它。 您的XML具有未出現在HTML中的代碼和縣值。 我添加了缺少的代碼值以向您顯示它正在運行，但沒有將它們添加到County <select> 。 如果您知道所有可能的代碼和縣的代碼，並且可以更新HTML，那么這將不是問題，如果您希望在僅選擇舊值的情況下附加新值，則代碼將變得有些棘手。