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

新手上路,请多包涵

所以我得到了这个 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));

我究竟做错了什么?

原文由 stratis 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.5k
2 个回答

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

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

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

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

原文由 SachinGutte 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

如果你真的想从客户端处理它,那么你将不得不求助于使用 JavaScript 来:

  1. 通过 DOM 从表单收集数据
  2. 将其组织在一个对象或数组中
  3. 使用 JSON.stringify 生成 JSON
  4. 使用 XMLHttpRequest 发布

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


更新以响应对问题的重大重写……

  • 您的 JS 没有 readystatechange 处理程序,因此您对响应不执行任何操作
  • 单击提交按钮时触发 JS,而不取消默认行为。 JS 函数完成后,浏览器将立即提交表单(以常规方式)。

原文由 Quentin 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题