如何选择 ajax 发送到 html 文件的 XML 变量？

Question

我有一个 XML 文档、一个 AJAX 脚本和一个 HTML 脚本。我想要传递给 HTML 的 XML 文件的某些值。我应该使用什么命令来完成以下操作：

XML 脚本：

    root>
  <coin>
    <trader variable="GLDAG_MAPLE">Gold.co.uk</trader>
    <metal>Silver</metal>
    <type>Maple</type>
    <price>£31.56</price>  **<--- THIS TO BE PASSED THROUGH TO: <td id="001">** 
  </coin>
  <coin>
    <trader variable="GLDAG_BRITANNIA">Gold.co.uk</trader>
    <metal>Silver</metal>
    <type>Britannia</type>
    <price>£32.4</price>  **<---- THIS TO BE PASSED THROUGH TO <td id="002">**
  </coin>

AJAX 脚本：

$(response)
    .find("coin")
    .each(function () {
      var _trader = "Trader: " + $(this).find("trader").text();
      console.log(_trader);

      var _metal = "Metal: " + $(this).find("metal").text();
      var _price = "Price: " + $(this).find("price").text();
      var _type = "Type: " + $(this).find("type").text();

      $("#001").text($(this).find('price').text());
      $("#002").text($(this).find('price').text());
      $("#003").text($(this).find('price').text());
      $("#004").text($(this).find('price').text());
      $("#005").text($(this).find('price').text());
      $("#006").text($(this).find('price').text());


      // add content to the HTML
      $("#001").append(_price);         **<--- currently passing through ALL price values**
      $("#002").append(_price);         **<--- also passing through ALL price values** 
    });

HTML 脚本：

  <tr>
    <td>**PRICES PLACED BELOW:**</td>
    <td id="001"></td>
    <td id="002"></td>
  </tr>

Answer 1

您发布了无效的 XML - 重复的 xml 标记需要在容器标记中。我在示例中添加了<root></root>

如果您不想在附加之前定义 TD：

let  response = `<root>
<coin>
  <trader variable="GLDAG_MAPLE">Gold.co.uk</trader>
  <metal>Silver</metal>
  <type>Maple</type>
  <price>£31.56</price>
</coin>
<coin>
  <trader variable="GLDAG_BRITANNIA">Gold.co.uk</trader>
  <metal>Silver</metal>
  <type>Britannia</type>
  <price>£32.4</price>
</coin>
</root>`;

$table = $("table tbody");
$row = $table.append("<tr/>")
$(response)
    .find("coin")
    .each(function () {
      const _trader = "Trader: " + $(this).find("trader").text();
      console.log(_trader);

      var _metal = "Metal: " + $(this).find("metal").text();
      var _price = "Price: " + $(this).find("price").text();
      var _type = "Type: " + $(this).find("type").text();
      $row.append(`<td>${_price}</td>`)
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>**PRICES PLACED BELOW:**</td>
    </tr>
  </tbody>
</table>

如果你这样做了，那么

const pad = num => ("00"+num).slice(-3);
let response = `<root>
<coin>
  <trader variable="GLDAG_MAPLE">Gold.co.uk</trader>
  <metal>Silver</metal>
  <type>Maple</type>
  <price>£31.56</price>
</coin>
<coin>
  <trader variable="GLDAG_BRITANNIA">Gold.co.uk</trader>
  <metal>Silver</metal>
  <type>Britannia</type>
  <price>£32.4</price>
</coin>
</root>`;

$(response)
  .find("coin")
  .each(function(i,coin) {
    const _trader = "Trader: " + $(this).find("trader").text();
    console.log(_trader);

    var _metal = "Metal: " + $(this).find("metal").text();
    var _price = "Price: " + $(this).find("price").text();
    var _type = "Type: " + $(this).find("type").text();
    $("#coin"+pad(i)).text(_price)
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>**PRICES PLACED BELOW:**</td>
      <td id="coin000"></td>
      <td id="coin001"></td>
    </tr>
  </tbody>
</table>