从 XML 填充 jquery 表单

Question

我正在尝试使用来自 XML 的数据填充 jquery 表单，其中 XML 的 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() 构造，这（恕我直言）更容易保持直截了当。

$.get() 只是硬编码type="GET" 和$.post() 硬编码type="POST"

---

另外，我对 XML 数据类型做的不多，但我强烈怀疑 xml -- 在你的 AJAX 代码块的成功函数中，在这种情况下：

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

是否是一个变量，它将包含服务器端脚本中 ECHOed/printed/etc 的任何内容？我不相信这是一个 XML object...

Answer 2

好的，这里发生了很多事情，所以我认为一个新的实现会比一系列更正更容易理解（我会尝试指出您对 JavaScript 的理解可能需要一些工作的地方）首先demo。现在是 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 辅助方法）。将此答案加入您的答案时，您可以假设所有这些都包含在远程获取您的 XML 的 $.get() 中。
• 我还将在 JavaScript 中处理的 click 绑定到 $('#btnxml') （这更干净，但也因为 JSFiddle 不喜欢指向命名函数的 onclick 属性），这并不是严格错误，它只是更干净。李>

现在进行实质性更改：

• 您确实在尝试做两件事，填充您的 $('#ID') 选择器（最初是 <input type='text'>，这是不正确的，在此代码中我更新为 <select>，然后填充后您正在尝试绑定change 事件处理程序。你有这些步骤，我把它们分开了。另外，以编程方式更改<select> 不会自动触发更改事件，所以我在末尾附加了.trigger('change') .
• 您似乎还试图获取所选计划的子节点并使用相同的名称更新相应的input。您可以使用.childNodes 属性，但这将包括TextNodes 用于XML 节点之间的所有空白，而不是试图过滤掉它们，我认为单独映射它们会更干净。如果您的 HTML 和 XML 不断更新，这可能对您不起作用，但我要说的下一点可能会阻止完全自动的方法。
• 根据值选择选项会带来一些挑战。 jQuery 非常聪明。如果您有一个<select> 元素，其中包含一组没有value 属性的选项，并且您尝试通过该元素内的<option>s 之一的字符串设置该<select> 元素的.val()会做正确的事。但是，如果没有与该值匹配的元素，那么它将默默地通过它。您的 XML 具有未出现在 HTML 中的代码和县值。我添加了缺少的代码值以向您显示它正在工作，但我没有将它们添加到 County <select>。如果您知道所有可能的代码和县，并且您可以更新您的 HTML，那么这不会是一个问题，如果您希望在刚刚选择旧值的同时附加新值，那么您的代码会变得有点棘手。