如何使用 html 表单数据发送 JSON 对象

javascript jquery html json forms

2022-08-30 02:02:47

所以我有这个HTML表单：

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

当用户单击提交时，将此表单的数据作为 JSON 对象发送到我的服务器的最简单方法是什么？

更新：我已经走得很远了，但它似乎不起作用：

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

我做错了什么？

答案 1

以数组形式获取完整的表单数据，并将其字符串化。

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

您可以稍后在 ajax 中使用它。或者，如果您不使用ajax;将其放在隐藏的文本区域中并传递到服务器。如果此数据通过普通格式数据作为 json 字符串传递，则必须对其进行解码。然后，您将获取数组中的所有数据。

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

答案 2

HTML 不提供从表单数据生成 JSON 的方法。

如果你真的想从客户端处理它，那么你必须求助于使用JavaScript来：

通过 DOM 从表单中收集数据
在对象或数组中组织它
使用 JSON.stringify 生成 JSON
用 XMLHttpRequest 发布它

您可能最好坚持使用数据并在服务器上而不是JSON上处理数据。您的表单没有任何复杂的层次结构，可以从 JSON 数据结构中受益。application/x-www-form-urlencoded

更新以回应问题的重大重写...

您的 JS 没有处理程序，因此您不对响应执行任何操作readystatechange
单击提交按钮时触发 JS，而不取消默认行为。一旦JS功能完成，浏览器将（以常规方式）提交表单。