如何将html表单的输入保存到json文件中？答案

【问题标题】：How to save inputs of html form into json file?如何将html表单的输入保存到json文件中？
【发布时间】：2021-10-26 20:01:32
【问题描述】：

我是 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>

我不知道这是否是编写完整代码的正确方法，但端到端执行我在这里给出了完整代码。

【问题讨论】：

标签： javascript html ajax

【解决方案1】：

你可以使用JSON.stringify():

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

然后将formData下载为this SO post suggest：

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，因为导航器无权访问您的本地文件存储。

【讨论】：

您好 Xavier，我更改了但仍然没有下载文件。
根据您的需要编辑
@swarna 这行得通吗？
不，不是泽维尔