Question

<!doctype html>
<html>
    <head>
        <title>HTML to XML</title>
    </head> 
    <body>
        <form id="form1">
            First name: <input id="btn1" type="text" name="FirstName" ><br>
            Last name: <input id="btn2" type="text" name="LastName" ><br>
            <input type="submit" value="Submit">
        </form>
        <p>On Click of Submit, first name and last name should be stored XML file.</p>
    </body>
</html>

点击提交后，应创建xml文件，并将HTML数据（即名字和姓氏）存储在新创建的xml文件中。

Answer 1

最简单的方法是创建data url & download attribute并提供供用户下载的链接。直接从javascript写入文件系统很棘手。

(function($) {
  $(document).on('ready', function() {
    $("#submitButton").on('click', function(e) {
      //This is where you construct the data you would like to save
      var fileDataToSave = $("#form1").serialize();
      var $downloadAnchor = $("<a/>", {
        href: 'data:text/plain;charset=UTF-8,' + fileDataToSave,
        download: "HelloWorld.xml"
      });
      $downloadAnchor.text("Click me to download XML");
      $("body").append($downloadAnchor);
       e.preventDefault();
    });

  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <title>HTML to XML</title>
</head>

<body>
  <form id="form1">
    First name:
    <input id="btn1" type="text" name="FirstName">
    <br>Last name:
    <input id="btn2" type="text" name="LastName">
    <br>
    <button id="submitButton">submit</button>
  </form>
  <p>On Click of Submit, first name and last name should be stored XML file.</p>
</body>

</html>

我们如何使用Javascript将HTML表单数据存储到XML文件中（并且不使用任何服务器端工具，如asp.net或PHP）？

1 个答案: