如何创建一个 HTML 表单，该表单生成一个 JSON 文件，其中包含提交给 HTML 表单的所有数据？ [关闭]

Question

我想创建一个 HTML 表单，用户可以在其中输入姓名、地址和性别。在用户输入该信息并单击提交后，将下载包含该信息的 JSON 文件。有人可以告诉我如何创建这样的表格吗？

Answer 1

您实际上可以使用 jQuery 的 serialize() 函数。既然你用过 Bootstrap，那肯定会有 jQuery。所以你需要做的就是：

$(function () {
  $("#myForm").submit(function () {
    var jsonOutput = JSON.stringify($(this).serializeArray());
    $("#genJSON").text(jsonOutput);
    $("#download").attr("href", 'data:application/executable;charset=utf-8,' + encodeURIComponent(jsonOutput)).show();
    return false;
  });
});

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
pre {font-family: 'Consolas', monospace; white-space: pre-wrap;}
form,
form ul,
form ul li,
form ul li label {display: block;}
form ul li {padding: 5px;}
form ul li label strong {display: inline-block; width: 100px;}
form ul li label input {padding: 3px;}
form ul li > input {margin-left: 105px; padding: 3px 10px; cursor: pointer;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="" id="myForm">
  <ul>
    <li>
      <label>
        <strong>Username</strong>
        <input type="text" name="Username" />
      </label>
    </li>
    <li>
      <label>
        <strong>Password</strong>
        <input type="text" name="Password" />
      </label>
    </li>
    <li>
      <label>
        <strong>Full Name</strong>
        <input type="text" name="FullName" />
      </label>
    </li>
    <li>
      <label>
        <strong>Email</strong>
        <input type="text" name="Email" />
      </label>
    </li>
    <li>
      <input type="submit" value="Get JSON" />
    </li>
  </ul>
</form>

<pre id="genJSON"></pre>
<div>
  <a id="download" style="display: none;">Download Code</a>
</div>

更新

使用data: URI方案，是可以的。

this.href = 'data:application/json;charset=utf-8,'
            + encodeURIComponent(genJSON.innerHTML);

Answer 2

我制作了以下html表单

<div class="row">
    <div class="block block-bordered">
        <div class="block-header bg-gray-lighter">
            <h3 class="block-title">Profile </h3>
        </div>
        <div class="block-content">
            <form class="form-horizontal push-10-t push-10" action="base_forms_premade.html" method="post"
                  onsubmit="return false;">
                <div class="row">
                    <div class="col-sm-7">
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="mega-firstname">Participant 1</label>
                                <input class="form-control input-lg" type="text" id="mega-firstname"
                                       name="mega-firstname" placeholder="Name">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-7">
                        <div class="form-group">
                            <div class="col-xs-12">
                                <label for="mega-bio">Age</label>
                                    <textarea class="form-control input-lg" id="mega-bio" name="mega-bio" rows="22"
                                              placeholder="Age"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group"></div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <label for="mega-skills">Subject</label>
                                <select class="form-control" id="mega-skills" name="mega-skills" size="7" multiple>
                                    <option value="1">Sale</option>
                                    <option value="2">Real Estate</option>
                                    <option value="3">Employment</option>
                                    <option value="4">Loan</option>
                                    <option value="5">Renting</option>
                                    <option value="6">Finance</option>
                                    <option value="7">Construction</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="mega-age">Amount</label>
                                <input class="form-control input-lg" type="text" id="mega-age" name="mega-age"
                                       placeholder="Enter bitcoin amount">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12">
                        <button class="btn btn-warning" data-toggle="modal" data-target="#modal-slideup"
                                type="submit"><i class="fa  push-5-r"></i> Submit
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>