gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:08:46 24 4
gpt4 key购买 nike

我有一个产品列表,我想根据用户从 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>

我是这个级别的新手,因此对于如何退回正确的产品,我将不胜感激。

最佳答案

假设您将检索到的 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示例。

关于javascript - 使用 XML 根据用户定义的选项填充 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16562891/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com