如何使用 Javascript 将表单输入数据保存到 XML 文件？答案

【问题标题】：How to save form input data to a XML file using Javascript?如何使用 Javascript 将表单输入数据保存到 XML 文件？
【发布时间】：2014-07-22 16:05:08
【问题描述】：

我想将这些表单输入保存在一个文件中（例如 XML），以便以后能够在表单中再次使用它：

<html>
    <body>
        <form action="demo_form.asp">
            First name: <input type="text" name="FirstName" value="Mickey"><br>
            Last name: <input type="text" name="LastName" value="Mouse"><br>
            <input type="submit" value="Submit">
        </form>

        <p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p>

    </body>
</html>

实现这一目标的最简单方法是什么？我不能使用 PHP 或 ASP.NET。

【问题讨论】：

您可以轻松地将数据下载到 XML 文件中，但“以后使用”是什么意思？

标签： javascript jquery html client-side-data

【解决方案1】：

除非您使用服务器端语言将数据保存到文件系统（我假设您的意思是想要保存 XML 文件）是不可能的。 JavaScript 应用程序无法写入文件系统。

您可以改用HTML5's storage capabilities。看看“How to save data from a form with HTML5 storage”

【讨论】：

【解决方案2】：

如果您需要将数据保存到您的服务器，那么您将需要服务器端工具 ASP.NET 或 PHP，如您所说。

但是，您说您希望以 XML 格式存储数据，以便您可以稍后在表单中使用它。您可以稍后在同一页面中使用数据并将其放入 XML 中，如下所示：

interval=setInterval(function(){
    first=$('[name*="FirstName"]').val();
    last=$('[name*="LastName"]').val();
    output='<data><first>'+first+'</first><last>'+last+'</last></data>';
    $('#output').text(output);
},200);

http://jsfiddle.net/pA8nC/

但我想不出你为什么要这样做！您可以使用纯 JavaScript 或 JQuery 直接访问这些值：

jQuery:

firstName=$('[name*="FirstName"]').val();
lastName=$('[name*="LastName"]').val();

JS：

firstName=document.form.FirstName.value;
lastName=document.form.LastName.value;

【讨论】：

【解决方案3】：

你的要求只能在服务器端完成！

根据您的问题，我可以理解您是 Web 开发的新手，我知道您只是想保留数据，以便以后可以按需使用

我的建议是将cookie或url或隐藏字段中的值保留为XML字符串，您最好选择隐藏字段。

【讨论】：

【解决方案4】：

下面的代码示例将允许您从页面上的字段中获取数据，并将它们直接写入 txt 文件到用户本地框。我目前正在寻找一种将它们写入 XMl 的方法，用于我正在进行的项目，但至少我可以将我想要的数据写入文本文件。

var userInput = document.getElementById("userInputId").value;

var fileURL = 'data:application/notepad;charset=utf-8,' + encodeURIComponent(userInput);
var fileName = "test.txt";


if (!window.ActiveXObject) {
  var save = document.createElement('a');
  save.href = fileURL;

  save.target = '_blank';
  save.download = fileName || 'unknown';

  var event = document.createEvent('Event');
  event.initEvent('click', true, true);
  save.dispatchEvent(event);
  (window.URL || window.webkitURL).revokeObjectURL(save.href);
}

// for IE
else if (!!window.ActiveXObject && document.execCommand) {
  var _window = window.open(fileURL, '_blank');
  _window.document.close();
  _window.document.execCommand('SaveAs', true, fileName || fileURL)
  _window.close();
}

【讨论】：

以上代码在 IE 10.X/11 和 firefox 下无法正常工作。

【解决方案5】：

当提交表单时，此 javascript 将触发表单数据的文件下载（针对每个表单）。它不使用 XML，因为我不知道您的架构是什么样的（我怀疑它的用处，而表单序列化字符串可以使用 xhr 快速发布）。

http://jsfiddle.net/CKvcV/

(function () {
   var makeTextFile = function (text) {
        var data = new Blob([text], {type: 'text/plain'});
        return window.URL.createObjectURL(data);
      },
      serializeForm = function(form, evt){
        var evt    = evt || window.event;
        evt.target = evt.target || evt.srcElement || null;
        var field, query='';
        if(typeof form == 'object' && form.nodeName == "FORM"){
            for(i=form.elements.length-1; i>=0; i--){
                field = form.elements[i];
                if(field.name && field.type != 'file' && field.type != 'reset'){
                    if(field.type == 'select-multiple'){
                        for(j=form.elements[i].options.length-1; j>=0; j--){
                            if(field.options[j].selected){
                                query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+');
                            }
                        }
                    }
                    else{
                        if((field.type != 'submit' && field.type != 'button') || evt.target == field){
                            if((field.type != 'checkbox' && field.type != 'radio') || field.checked){
                                query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+');
                            }   
                        }
                    }
                }
            }
        }
        return query.substr(1);
    }
   , _onsubmit = function() {
        var _href = makeTextFile(serializeForm(this));
        var _a = document.createElement("A");
        _a.setAttribute('download', 'export.txt');
        _a.setAttribute('target', '_blank');
        _a.href = _href;
        _a.click();
        window.URL.revokeObjectURL(_href);
        //return false;
    };

    [].forEach.call(
        document.querySelectorAll('form'),
        function(f) { f.onsubmit = _onsubmit; }
        );
})();

将其构建到书签或其他任何内容中。但是，如果您希望为自己节省一些输入，您可能希望将值存储在 localStorage 而不是文件中。您没有提及您打算如何重用数据，并且从 localStorage 中提取数据比构建动态文件上传器并让用户找到正确的文件要容易得多。

【讨论】：