Question

html表单的一部分

<div id="form1">

        <p>Local</p>
        <input class="a" type="date" name="Data" id="Data" placeholder="Data" />
        <input class="a" type="time" name="Hora" id="Hora" placeholder="Hora" />
        <input class="a" type="text" name="Sala" id="Sala" placeholder="Sala" />
        <input class="a" type="text" name="Edifício" id="Edifício" placeholder="Edifício" />
        <input class="a" type="text" name="Cidade" id="Cidade" placeholder="Cidade" />
        <input class="a" type="text" name="País" id="País" placeholder="País" />
     </div>

我有一个html表单，它能够像这样创建一个带有输入值的XML文件。＆＃34;键＆＃34; tag是输入的名称，＆＃34;值＆＃34; tag是值。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssetInfo xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
<assetSubType>Audio_Video</assetSubType>
<state>importado</state>
<name>transferir (1).jpeg</name>
  <customMetaData>
     <key>Data</key>
     <value>2018-05-21</value>
  </customMetaData>
  <customMetaData>
     <key>Hora</key>
     <value>12:12</value>
  </customMetaData>
  <customMetaData>
     <key>Sala</key>
     <value>sala 2</value>
  </customMetaData>
  <customMetaData>
     <key>Edifício</key>
     <value>casa</value>
  </customMetaData>
  <customMetaData>
     <key>Cidade</key>
     <value>porto</value>
  </customMetaData>
  <customMetaData>
     <key>País</key>
     <value>Portugal</value>
  </customMetaData>
</AssetInfo>

我想用＃34;值＆＃34;中的值填充表单输入。标签

我尝试这样做，用户选择xml文件，它在xml文件中搜索＆＃34; key＆＃34;和价值＆＃34;标签＆＃34;将文本插入存储在这些标记中，然后在表单的所有输入中搜索＆＃34; name＆＃34; =＆＃34;键中的文字＆＃34;标记并填充＆＃34;值＆＃34;的值标签

function loadData(fileInput) {
    "use strict";
  var file = fileInput.files[0];
  var fileURL = URL.createObjectURL(file);
  var req = new XMLHttpRequest();
  req.open('GET', fileURL);
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(fileURL, 'text/xml');   

  req.onload = function() { 
    URL.revokeObjectURL(fileURL);
   populateData(fileInput.form, xmlDoc);
  };

  req.onerror = function() {
    URL.revokeObjectURL(fileURL);
    console.log('Error loading XML file.');
  };    
  req.send();
}    

function populateData(form, xmlDoc){ 
    "use strict";
  var root = xmlDoc.documentElement;
  var metadataNodes =root.querySelectorAll("customMetaDados");
    var map={};
    metadataNodes.forEach(function(metadata) {
    var key = metadata.querySelector('key').textContent;
    var value = metadata.querySelector('value').textContent;
    map[key] = value;
  });

    for (var i = 0; i < form.elements.length; i++) {
    var input = form.elements[i];
    if(input.name){ 
        input.value = map[input.name] || '';        
        }
          }
      }    

function readXML(){
    "use strict";
    var xml = new XMLHttpRequest();
    xml.open('GET', 'xml/*', false);
    xml.send();
    var xmlData=xml.responseXML;
    if(!xmlData){
        xmlData=(new DOMParser()).parseFromString(xml.responseText,'text/xml');
        var emp = xml.Data.getElementByTagName("customMetaDados");


        for(var i=0;i<emp.length;i++){
            var value= emp[i].getElementsByTagNAme("value")[i].firstCHild.data;
            input.value=value;
        }
    }
}

Answer 1

至少有两种主要方法可以实现这一目标。在javascritp中将XML转换为JSON，理论上它是最好的，但我不确定Convert XML to JSON (and back) using Javascript。但在我看来，有一种方法很容易实现，而且是你的方法。它在DOM中插入XML并使用常见的JavaScript方法读取它。这是一个小例子：

var sMyString = "<AssetInfo><customMetaData><key>País</key><value>Bielorusia</value></customMetaData><customMetaData><key>País</key><value>Portugal</value></customMetaData></AssetInfo>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "text/xml");

//oDOM it's now like document. so:

len = oDOM.getElementsByTagName("value").length;

customerData = [];
for(let i = 0; i<len ; i++){  
  customerData.push(oDOM.getElementsByTagName("value")[i].innerHTML);
  //do whatever with the value
}

console.log(customerData);

使用用户选择的xml文件填写表单

1 个答案: