javascript - 我们如何使用 JavaScript 或 jQuery 将 HTML 表单数据保存为 xml 格式?

标签 javascript jquery html xml

这是一个简单的html表单,我想从中获取数据并转换成xml或者获取xml格式的数据?

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    </head>
<body>
   <form action="" method="post">
        <p>
           <label for="firstname">First Name:</label>
            <input type="text" name="firstname" id="firstname">

            <label for="lastName">Last Name:</label>
            <input type="text" name="lastname" id="lastname">

        <button id="submitButton">submit</button>

    </body>
</form>
    </html>

最佳答案

如果您想要一个用于下载任何内容的纯 javascript 解决方案,您可以使用以下函数:

function downloadData(contentType,data,filename){

   var link=document.createElement("A");
   link.setAttribute("href",encodeURI("data:"+contentType+","+data));
   link.setAttribute("style","display:none");
   link.setAttribute("download",filename);
   document.body.appendChild(link); //needed for firefox
   link.click();
   setTimeout(function(){
    document.body.removeChild(link); //only to remove the temporal link
   },1000);
}

其中内容类型

要从表单创建 XML 数据,您可以使用:

function fromToXml(form){
    var xmldata=['<?xml version="1.0"?>'];
      xmldata.push("<form>");
    var inputs=form.elements;
    for(var i=0;i<inputs.length;i++){
        var el=document.createElement("ELEMENT");
      if (inputs[i].name){
        el.setAttribute("name",inputs[i].name);
        el.setAttribute("value",inputs[i].value);
        xmldata.push(el.outerHTML);
      }

    }
    xmldata.push("</form>");
    return xmldata.join("\n");
}

然后,尝试按照您的预期修改格式。

请参阅 https://jsfiddle.net/jmusfs9v/3/ 中的示例

如果您有兴趣从 javascript 生成格式良好的 XML 输出,您可以阅读文章:http://archive.oreilly.com/pub/h/2127

关于javascript - 我们如何使用 JavaScript 或 jQuery 将 HTML 表单数据保存为 xml 格式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45888863/

相关文章:

javascript - 要存储在 textarea 中的 iframe 内容

javascript - 这是什么语法错误? (测试 Hapi.js)

javascript - 有没有一种简单的方法可以用 Lodash 映射嵌套数据?

javascript - 这个 jQuery 语法是什么?它有什么用处?

javascript - 获取相对于浏览器窗口的位置

jquery - 使用媒体查询控制(覆盖)内联样式

html - Jekyll:生成一次包含并将其包含到所有页面

javascript - 在 Chrome 中运行时如何使用 Cypress 测试文件下载

javascript - 按下一步按钮时选择文本框值

CSS div交替颜色