Question

我有一个产品列表，我希望根据3个选项的选择返回给用户。最重要的是，这必须是一个静态页面，没有比javascript，HTML和XML更奇特。表格将沿着以下方式：

<label for="field_1">How much are you spending?</label><select name="field_1" id="cf_field_1" class="cformselect" >
            <option value="sub10">Less than £10</option>
            <option value="10-20">£10 - £20</option>
            <option value="20-30">£20 - £30</option>
            <option value="30-40">£30 - £40</option>
        </select>

<label for="field_2">Colour?</label><select name="field_2" id="cf_field_2" class="cformselect" >
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="yellow">Yellow</option>
        </select>

<label for="field_3">What is most important?</label><select name="field_3" id="cf_field_3" class="cformselect" >
            <option value="taste">Taste</option>
            <option value="look">How it looks</option>
            <option value="transport">How easy it is to carry</option>
        </select>

有7种可能的产品，通常有多种产品适合所选标准 - 但也有适合的时间。有了我的问题，可以得到48个可能的结果。可能会及时添加更多产品。

返回将是格式化文本中产品的描述（很高兴将其保存在HTML而不是XML中）。

我认为XML看起来像：

<?xml version="1.0" encoding="ISO-8859-1"?>
<productset>
  <product>
    <name>Prod 1</name>
    <value>sub10</value>
    <value>10-20</value>
    <colour>red</colour>
    <colour>blue</colour>
    <colour>yellow</colour>
    <feature>taste</feature>
    <body>
      <p>Lorem ipsum</p>
      <p>
        <a href="/prod_1.html"></a>
      </p>
    </body>
  </product>
  <product>
    <name>Prod 2</name>
    <value>20-30</value>
    <colour>red</colour>
    <colour>yellow</colour>
    <feature>taste</feature>
    <body>
      <p>Lorem ipsum</p>
      <p>
        <a href="/prod_2.html"></a>
      </p>
    </body>
  </product>
  <product>
    <name>Prod 3</name>
    <value>sub10</value>
    <value>30-40</value>
    <colour>red</colour>
    <colour>yellow</colour>
    <feature>carry</feature>
    <body>
      <p>Lorem ipsum</p>
      <p>
        <a href="/prod_3.html"></a>
      </p>
    </body>
  </product>
</productset>

我是这个级别的新手，因此如何获得正确的产品，我们将非常感谢所有人的帮助。

Answer 1

假设您在名为xml的变量中找到了检索到的XML字符串：

var parser = new DOMParser();
var xml_obj = parser.parseFromString(xml, "text/xml");
// now xml_obj is a DOM document
var products = xml_obj.getElementsByTagName("products");
// then process it as you need
for(var i=0; i < products.length; i++){
    console.log("Found product: " + products[i].getElementsByTagName("name")[0].textContent);       
}

这需要一些工作，所以你可以考虑使用jQuery或一些类似的库，这应该减少很多访问值的代码。请参阅this示例。

Answer 2

您可以使用xpath（http://www.w3schools.com/xpath/xpath_examples.asp）完成所需的操作虽然使浏览器兼容有点麻烦！

使用XML根据用户定义的选项填充HTML页面

2 个答案: