将html表单输入保存到json文件答案

【问题标题】：Save html form input to json file将html表单输入保存到json文件
【发布时间】：2016-12-22 03:09:57
【问题描述】：

<div class="email">
<section class="subscribe">
<div class="subscribe-pitch">
</div>
<form action="#" method="post" class="subscribe-form" id="emails_form">
<input type="email" class="subscribe-input" placeholder="Enter email for newsletter" >
<button id="email_submit" type="submit" value="send" class="subscribe-submit"><i class="fa fa-chevron-right"></i></button>
</form>

我需要将输入数据从简单的电子邮件表单保存到 json 文件中。我想我是用 javascript 来做的。有人可以一步一步帮助吗？我是新手

【问题讨论】：

json文件是用户下载的还是发到别的地方的？
这个电子邮件表单（或包含它的 HTML 页面）托管在什么样的服务器上？
Convert form data to JavaScript object with jQuery的可能重复
看这个答案stackoverflow.com/a/2276477/3029422，里面也有例子
您需要保存在服务器上吗？如果是这样的话，Javascript 在这里没有什么可做的。也许 PHP（或服务器使用的任何服务器端语言）会帮助您（使用类似 json_encode() 的东西）。但是，与往常一样，如果您有一个 Javascript 数组并且需要在 Javascript 中获取 JSON string，JSON.stringify() 可以帮助您。 developer.mozilla.org/es/docs/Web/JavaScript/Referencia/…

标签： javascript jquery html css json

【解决方案1】：

DEMO

使用序列化我们可以将输入的 html 表单保存到 JSON 输出

<script type="text/javascript">
  $(document).ready(function() {
  $("#btn").click(function(e){
     var jsonData = {};

   var formData = $("#myform").serializeArray();
  // console.log(formData);

   $.each(formData, function() {
        if (jsonData[this.name]) {
           if (!jsonData[this.name].push) {
               jsonData[this.name] = [jsonData[this.name]];
           }
           jsonData[this.name].push(this.value || '');
       } else {
           jsonData[this.name] = this.value || '';
       }


   });
   console.log(jsonData);
    $.ajax(
    {
        url : "action.php",
        type: "POST",
        data : jsonData,

    });
    e.preventDefault(); 
});
});
</script>

HTML

<div id="header">
 Send Form's data as JSON
</div>

<form id="myform" type="post">
  <fieldset>
    <legend>Ajax Form  </legend>
    <p>We would love to hear from you. Please fill out this form</p>
    <div class="elements">
      <label for="name">Name :</label>
      <input  required="required" type="text"  value="Girish Kumar Santhu" name="fname"  size="20"  />
    </div>
     <div class="elements">
      <label for="Age">Age :</label>
      <input required="required" type="number" value="32" id="age" name="age" size="10" />
    </div>  
    <div class="elements">
      <label for="pro"> Profession :</label>
      <select name="pro">
   <option value="Student">Student</option>
   <option value="Engineer" selected="selected">Engineer</option>
   </select>
    </div>      
    <div class="elements">
    <label for="Gender">Gender: </label>
      <input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male 
  <input type="radio" name="gender" value="Female" id="r2"> Female 
</div>  
    <div class="elements">
      <label for="hobby">Hobby :</label>
      <input type="checkbox" name="hobby[]" value="Sports" id="ch1" checked="checked"> Sports 
  <input type="checkbox" name="hobby[]" value="Coding"  id="ch2"> Coding 
   </div>

    <div class="submit">
       <input type="submit" id="btn" name="btn" class="btn" value="Submit" />
    </div>
    <span class="elements">Press "Ctrl + Shift + J" to see sent JSON in console: <span>
  </fieldset>
</form>

【讨论】：

请您的回答对我有用。但是此时我如何将其保存到文件而不是控制台。谢谢

【解决方案2】：

你需要使用

'use strict';

const fs = require('fs');

let student = {
    name: 'Mike',
    age: 25, 
    gender: 'Male',
    department: 'English',
    car: 'Honda' 
};

let data = JSON.stringify(student);  

fs.writeFileSync('file.json', data, finished);

function finished(err)
{
    console.log('success');
}

【讨论】：

但这仅适用于 Node 而不是如果代码在浏览器中执行...

【解决方案3】：

使用 jQuery，很简单：

var formData = JSON.stringify($("#emails_form").serializeArray());

如果您想将formData 存储在 JSON 文件中，您需要将其发布到服务器（例如通过 AJAX）并保存。但在这种情况下，您可以简单地在服务器上发布表单并将其转换为 JSON。

见this answer。

【讨论】：