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


128

所以我有这个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
看一下$.ajaxserialize在jQuery API中。
罗里·麦克罗桑

1
是否绝对必须是JSON对象?对象应具有什么结构?
安东尼·格里斯

1
@AnthonyGrist是的,它必须是JSON,因为它已针对ReST服务进行寻址。
kstratis 2014年

4
“似乎无效”是什么意思?请记住,我们看不到您的屏幕。
高高拱门

2
@ Konos5-REST与JSON无关。不需要数据采用任何特定格式。
丹尼尔2015年

Answers:


135

获取完整的表单数据作为数组,并对其进行json字符串化。

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

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

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

4
您已使用jQuery标记了问题。那你在用吗?与$.ajax它真的很容易通过这个数据。
SachinGutte 2014年

51

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

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

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

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


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

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

1
好,那我该如何解决呢?
kstratis 2014年

1
@Quentin:就我而言,我需要没有域控制的跨域POST。
user2284570

1
@ user2284570 —如果您有一个新问题,请提问
昆汀2015年

1
有一个建议添加enctype='application/json'到表单定义中以创建JSON数据w3.org/TR/html-json-forms
EkriirkE

4
@EkriirkE —您读过该页面吗?它说,在一个巨大的盒子中,周围有黑色和黄色的危险条纹,当心。该规范不再处于主动维护状态,HTML工作组不打算进一步维护它。
昆汀

3

您的代码很好,但是从未执行过,原因是提交按钮[type =“ submit”]只需将其替换为type = button

<input value="Submit" type="button" onclick="submitform()">

在脚本中; 表单未声明。

let form = document.forms[0];
xhr.open(form.method, form.action, true);

确切地说type =“ button”非常重要,如果不使用,则使用url参数进行重定向。
Rohit Parte

1

我来晚了,但是对于那些只需要使用html的对象来说,我有话要说。在某些服务器端框架(如PHP)中,您可以编写以下代码:

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

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

        <input value="Submit" type="submit">
    </form>

因此,我们需要设置输入名称作为object[property]对象。在上面的示例中,我们获得了带有以下JSON的数据:

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.