javascript - 使用 jQuery 解析 XML 并填充文本字段

Question

我有一个包含我所有数据的 XML 文件，我需要从这个 XML 文件数据填充文本字段。还有一个下拉列表，其中包含可以选择的 XML 中每个主要部分的名称。例如，如果有人在下拉列表中选择“M-A L”，它应该使用 XML 部分中的数据填充 HTML 文件中的文本字段。每个文本字段都应与 XML 中的数据链接。

这是我的 html 代码:

<select id="Bname">
    <option value="">Please Select</option>
    <option value="M-A">M-A L</option>
    <option value="AP">Alain P</option>
</select>

<input type="text" id="name">
<input type="text" id="title">
<input type="text" id="line1">

这是我的 jQuery 代码:

<script type="text/javascript">  
$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "signatures.xml",
    dataType: "xml",
    success: parseXml
  });  });


function parseXml(xml)
{
  $(xml).find("Signature").each(function()
  {
    $("#name").val($(this).find("Nom").text);
    $("#title").val($(this).find("PG-Ligne1").text);
    $("#line1").val($(this).find("PG-Ligne2").text);
  });

}

</script>

还有我的 XML 文件:

<?xml version="1.0" encoding="utf-8" ?>
<SignaturesNovatech>
  <Signature name="M-A L">
    <Nom>asd</Nom>
    <PG-Ligne1>Representative</PG-Ligne1>
    <PG-Ligne2>Cleaner</PG-Ligne2>
    <PG-Ligne3>3223 Metro street</PG-Ligne3>
    <PG-Ligne4>1-438-234-4453</PG-Ligne4>
    <PD-Ligne1>www.website.com</PD-Ligne1>
    <PD-Ligne2>mal@website.com</PD-Ligne2>
    <PD-Ligne3>City here</PD-Ligne3>
    <PD-Ligne4>Postal code</PD-Ligne4>
    <PD-Ligne5>Services available</PD-Ligne5>
    <PD-Ligne6>Graphic</PD-Ligne6>
  </Signature>
<Signature name="Alain P">
    <Nom>asd</Nom>
    <PG-Ligne1>Representative</PG-Ligne1>
    <PG-Ligne2>Cleaner</PG-Ligne2>
    <PG-Ligne3>3223 Metro street</PG-Ligne3>
    <PG-Ligne4>1-438-234-4453</PG-Ligne4>
    <PD-Ligne1>www.website.com</PD-Ligne1>
    <PD-Ligne2>mal@website.com</PD-Ligne2>
    <PD-Ligne3>City here</PD-Ligne3>
    <PD-Ligne4>Postal code</PD-Ligne4>
    <PD-Ligne5>Services available</PD-Ligne5>
    <PD-Ligne6>None</PD-Ligne6>
  </Signature>
</SignaturesNovatech>

我知道“onchange”下拉项缺少了一部分。下拉菜单中的选项应该是文本...它应该扫描 XML 文件以检测那里是否有新条目。

我是 XML 和 jQuery 解析的新手。非常感谢

Answer 1

所以，这是您所追求的快速而粗略的版本。看看这是否是您想要的。

var xml = '<?xml version="1.0" encoding="utf-8" ?><SignaturesNovatech><Signature name="M-A L"><Nom>asd</Nom><PG-Ligne1>Representative</PG-Ligne1><PG-Ligne2>Cleaner</PG-Ligne2><PG-Ligne3>3223 Metro street</PG-Ligne3><PG-Ligne4>1-438-234-4453</PG-Ligne4><PD-Ligne1>www.website.com</PD-Ligne1><PD-Ligne2>mal@website.com</PD-Ligne2><PD-Ligne3>City here</PD-Ligne3><PD-Ligne4>Postal code</PD-Ligne4><PD-Ligne5>Services available</PD-Ligne5><PD-Ligne6>Graphic</PD-Ligne6></Signature><Signature name="Alain P"><Nom>asd-Alain</Nom><PG-Ligne1>Representative-2</PG-Ligne1><PG-Ligne2>Cleaner-2</PG-Ligne2><PG-Ligne3>3223 Metro street</PG-Ligne3><PG-Ligne4>1-438-234-4453</PG-Ligne4><PD-Ligne1>www.website.com</PD-Ligne1><PD-Ligne2>mal@website.com</PD-Ligne2><PD-Ligne3>City here</PD-Ligne3><PD-Ligne4>Postal code</PD-Ligne4><PD-Ligne5>Services available</PD-Ligne5><PD-Ligne6>None</PD-Ligne6></Signature></SignaturesNovatech>';

$("#Bname").on("change", parseXml);

function parseXml() {
  var filter = $(this).find(":selected").text();
  var $node = $(xml).find("Signature[name='" + filter + "']");
  $("#name").val($node.find("Nom").text());
  $("#title").val($node.find("PG-Ligne1").text());
  $("#line1").val($node.find("PG-Ligne2").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bname">
    <option value="">Please Select</option>
    <option value="M-A">M-A L</option>
    <option value="AP">Alain P</option>
</select>

<br/><br/>
<input type="text" id="name"><br/>
<input type="text" id="title"><br/>
<input type="text" id="line1">

因此，您的代码可能 look like这经过必要的改变。希望对您有所帮助。