如何将HTML表单输入内容保存为JSON文件？代码失效求高效实现方案

原代码错误点 #

• 重复绑定了提交按钮的点击事件，内层的下载逻辑在首次点击时不会执行
• 调用遍历方法时缺失jQuery前缀$，直接写each(formData)会抛出变量未定义错误
• 未引入第三方Base64编码库就调用Base64.encode()方法，运行时直接报错
• 已经组装完成的jsonData对象没有转成JSON字符串，无法直接作为文件内容输出
• 保存的文件后缀错误，JSON格式文件应当使用.json后缀而非.txt

修复后的完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <title>HTML表单转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){
                // 阻止表单默认提交行为
                e.preventDefault();
                var jsonData = {};
                var formData = $("#myform").serializeArray();
                
                // 遍历表单数据组装JSON对象
                $.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 || '';
                    }
                });

                // 将JSON对象转为格式化的字符串
                const jsonContent = JSON.stringify(jsonData, null, 2);
                // 创建临时a标签触发下载，无需修改原有按钮属性
                const tempLink = document.createElement('a');
                tempLink.download = 'form_data.json';
                tempLink.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(jsonContent);
                tempLink.style.display = 'none';
                document.body.appendChild(tempLink);
                tempLink.click();
                document.body.removeChild(tempLink);
            });
        });
    </script>
</head>
<body>
    <div id="header">
        表单数据转JSON保存
    </div>
    <form id="myform" type="post">
        <fieldset>
            <legend>Ajax表单 </legend>
            <p>请填写表单，提交后会自动下载对应JSON文件</p>
            <div class="elements">
                <label for="name">姓名 :</label>
                <input  required="required" type="text"  value="Girish Kumar Santhu" name="fname"  size="20"  />
            </div>
            <div class="elements">
                <label for="Age">年龄 :</label>
                <input required="required" type="number" value="32" id="age" name="age" size="10" />
            </div>
            <div class="elements">
                <label for="pro"> 职业 :</label>
                <select name="pro">
                    <option value="Student">学生</option>
                    <option value="Engineer" selected="selected">工程师</option>
                </select>
            </div>
            <div class="elements">
                <label for="Gender">性别: </label>
                <input type="radio" name="gender" value="Male" checked="checked" id="r1"> 男
                <input type="radio" name="gender" value="Female" id="r2"> 女
            </div>
            <div class="elements">
                <label for="hobby">爱好 :</label>
                <input type="checkbox" name="hobby[]" value="Sports" id="ch1" checked="checked"> 运动
                <input type="checkbox" name="hobby[]" value="Coding"  id="ch2"> 写代码
            </div>
            <div class="submit">
                <input type="submit" id="btn" name="btn" class="btn" value="提交" />
            </div>
        </fieldset>
    </form>
</body>
</html>

优化说明 #

修复后的代码用原生DOM创建临时链接的方式触发下载，不需要依赖额外的Base64编码库，兼容性更好，导出的JSON文件会自动格式化，可读性更高。

内容的提问来源于stack exchange，提问作者swarna