我是HTML的新手，我正试图从实际代码中学习。我使用Javascript将HTML表单输入转换为JSON文件并保存到本地系统。这不是储蓄。代码出了什么问题。请建议一个有效的方法来解决这个问题。
请原谅我在这个社区里写问题的方式，我会逐渐改进更好的方式，谢谢。
<!DOCTYPE html>
<html>
<head>
<title>Send HTML Form as JSON</title>
<style>
#myform {
margin:0 auto;
width:500px;
padding:14px;
}
label {
width: 10em;
float: left;
margin-right: 0.5em;
display: block;
vertical-align: middle;
}
.submit {
float:right;
}
fieldset {
background:#EBF4FB none repeat scroll 0 0;
border:2px solid #B7DDF2;
width: 450px;
}
legend {
color: #fff;
background: #80D3E2;
border: 1px solid #781351;
padding: 2px 6px
}
.elements {
padding:10px;
}
p {
border-bottom:1px solid #B7DDF2;
color:#666666;
font-size:12px;
margin-bottom:20px;
padding-bottom:10px;
}
span {
color:#666666;
font-size:12px;
margin-bottom:1px;
}
.btn{
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
border: 1px solid #B7DDF2;
}
.btn:hover{
color: #333333;
background-color: #e6e6e6;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<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 || '';
}
});
// This will act when the submit LINK is clicked
$("#btn").click(function(event){
var txtData = each(formData);
$(this).attr('download','sugguestedName.txt')
.attr('href',"data:application/octet-stream;base64,"+Base64.encode(txtData));
});
e.preventDefault();
});
});
</script>
</head>
<body>
<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>
</fieldset>
</form>
</body>
</html>
我不知道这是正确的方式来写完整的代码或不但是执行端到端我已经给出了完整的代码在这里。
可以使用JSON.stringify():
var formData = JSON.stringify($("#myform").serializeArray());
然后按照这个SO帖子的建议下载formData:
function download(content, fileName, contentType) {
var a = document.createElement("a");
var file = new Blob([content], {type: contentType});
a.href = URL.createObjectURL(file);
a.download = fileName;
a.click();
}
download(formData, 'json.txt', 'text/plain');
这里模拟一个点击动作来下载JSON格式的文件，因为导航器无法访问本地文件存储。