Javascript 将 html 表单输入保存到 json 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38963096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save html form input to json file
提问by The wise
<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>
I need to save the input data from a simple email form to a json file.I think I do that with javascript. Can someone help step by step please? I am novice
我需要将输入数据从一个简单的电子邮件表单保存到一个 json 文件中。我想我是用 javascript 做到的。有人可以一步一步地帮助吗？我是新手
采纳答案by bob
you need to use
你需要使用
'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');
}
回答by Surya R Praveen
Using Serializing we can save input html form to JSON output
使用序列化我们可以将输入的 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
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>
回答by andreas
With jQuery, it's quite simple:
使用 jQuery，这很简单：
var formData = JSON.stringify($("#emails_form").serializeArray());
If you want to store formDatain a JSON file, you need to post it to the server (e.g. per AJAX) and save it. But in that case, you can simply post the form und convert it to JSON on the server itself.
如果你想存储formData在一个 JSON 文件中，你需要将它发布到服务器（例如每个 AJAX）并保存它。但在这种情况下，您可以简单地发布表单并将其转换为服务器本身的 JSON。
See this answer.
看到这个答案。
