将 XML 节点映射到 HTML 表单元素

Posted 2023-05-09

【中文标题】将 XML 节点映射到 HTML 表单元素

【英文标题】：Mapping XML nodes into HTML form elements

【发布时间】：2015-08-21 12:34:23

【问题描述】：

我想将 XML 节点值（从 AJAX 脚本发送的 XML）映射到相应的 html 表单元素中。例如，一个 XML 数据；

<object>
  <fielda>John</fielda>
  <fieldc>Tailor</fieldc>
</object>

应该通过脚本插入到 HTML 表单中：

<form name="myform">
  <input name="fielda" value="">
  <input name="fieldc" value="">
</form>

要注意的是脚本应该对所有对象通用（无法提前知道将在 XML 中给出哪些字段，例如，如果“fieldx”以 XML 形式发送，则此脚本应满足 document.myform.fieldx 表单元素和相应的来自 XML 的值）。所以这个脚本应该遍历所有的 XML 节点并尝试将值设置为 HTML 表单。

【问题讨论】：

也许使用 XSL T 是要走的路

【参考方案1】：

jsfiddle

HTML

<form name="myform">
    <input name="fielda" value=""/>
    <input name="fieldc" value=""/>
</form>
<div id="status">Loading...</div>

CSS

#status 
    font-style:italic;
    font-size:0.8em;

javascript

$.ajax(
    'url':'/echo/xml/',
    'method':'POST',
    'data':
        xml:'<object>\n<fielda>John</fielda>\n<fieldc>Tailor</fieldc>\n</object>',
        'delay':1
    ,
    'complete':function(xhr,status) 
        console.log(xhr);
        var form = document.myform;
        var root = xhr.responseXML.children[0];
        for (var i = 0; i < root.children.length; ++i) 
            var field = root.children[i];
            form[field.nodeName].value = field.textContent;
         // end for
        document.getElementById('status').textContent = '';
    
);

【讨论】：

在 JS 中难道没有类似 foreach(nodes as node) 的东西来循环遍历所有子节点而不是 for() 循环吗？

@sbrbot 有for (var propName in obj)，但它会遍历obj 的所有拥有和继承的属性名称。有for each (var propValue in obj)，但它会循环遍历obj 的所有拥有和继承的属性值，并且已被弃用。有for (var x of obj)，但这是新的和实验性的。还有..

Array::forEach()，但这需要一个 lambda 回调函数并且很混乱。传统的for 循环是这里循环数组的最佳方法。