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

Question

我想将 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 表单。

Answer 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 = '';
    }
});