将 HTML 表单数据放入 JSON 对象并进行 AJAX POST 调用答案

【问题标题】：Put HTML form data in JSON object and make AJAX POST call将 HTML 表单数据放入 JSON 对象并进行 AJAX POST 调用
【发布时间】：2018-06-30 13:40:50
【问题描述】：

我有以下 HTML 代码：

<!DOCTYPE html>

<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <form>
            <table>
                <tr>
                    <td><label>Brand:<input type="text" name="brand" size="5" required></label></td>
                    <td><label>Model:<input type="text" name="model" size="5" required></label></td>
                    <td><label>OS:<input type="text" name="os" size="5" required></label></td>
                    <td><label>Image link:<input type="text" name="image" size="5" required></label></td>
                    <td><label>Screensize:<input type="text" name="screensize" size="5" required></label></td>
                </tr>
            </table>
            <input type="submit" value="Submit">
        </form>
    </body>

</html>

我想知道如何将这个 HTML 表单的数据放入 JSON 对象并进行 AJAX POST 调用？

【问题讨论】：

标签： jquery html json ajax post

【解决方案1】：

首先，使用serializeArray 将表单元素编码为名称和值的数组。然后用 Ajax 请求发送。

HTML：

    <form>
        <table>
            <tr>
                <td><label>Brand:<input type="text" name="brand" size="5" required></label></td>
                <td><label>Model:<input type="text" name="model" size="5" required></label></td>
                <td><label>OS:<input type="text" name="os" size="5" required></label></td>
                <td><label>Image link:<input type="text" name="image" size="5" required></label></td>
                <td><label>Screensize:<input type="text" name="screensize" size="5" required></label></td>
            </tr>
        </table>
    </form>

<button onclick="submitForm();">Submit JSON</button>

JS：

function submitForm() {
    $.ajax({
        method: "POST",
        url: "some.php",
        data: JSON.stringify($("form").serializeArray())
    });
  }

【讨论】：