Question

所以我有这个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));

我做错了什么？

Answer 1

获取完整的表单数据作为数组，json将其字符串化。

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

您可以稍后在ajax中使用它。或者如果你没有使用ajax;把它放在隐藏的textarea中并传递给服务器。如果此数据通过普通表单数据作为json字符串传递，则必须使用json_decode对其进行解码。然后，您将获得数组中的所有数据。

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

Answer 2

HTML无法从表单数据生成JSON。

如果您真的想从客户端处理它，那么您将不得不求助于使用JavaScript：

通过DOM从表单中收集数据
将其组织在一个对象或数组中
使用JSON.stringify
使用XMLHttpRequest

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

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

你的JS没有readystatechange处理程序，所以你没有对响应做任何事情
单击提交按钮时触发JS而不取消默认行为。浏览器将在JS功能完成后立即提交表单（以常规方式）。

Answer 3

您可以尝试类似的操作：

<html>
<head>
    <title>test</title>
</head>

<body>
    <form id="formElem">
        <input type="text" name="firstname" value="Karam">
        <input type="text" name="lastname" value="Yousef">
        <input type="submit">
    </form>
    <div id="decoded"></div>
    <button id="encode">Encode</button>
    <div id="encoded"></div>
</body>
<script>
    encode.onclick = async (e) => {
        let response = await fetch('http://localhost:8482/encode', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
        })

        let text = await response.text(); // read response body as text
        data = JSON.parse(text);
        document.querySelector("#encoded").innerHTML = text;
      //  document.querySelector("#encoded").innerHTML = `First name = ${data.firstname} <br/> 
      //                                                  Last name = ${data.lastname} <br/>
      //                                                  Age    = ${data.age}`
    };

    formElem.onsubmit = async (e) => {
      e.preventDefault();
      var form = document.querySelector("#formElem");
     // var form = document.forms[0];

        data = {
          firstname : form.querySelector('input[name="firstname"]').value,
          lastname : form.querySelector('input[name="lastname"]').value,
          age : 5
        }

        let response = await fetch('http://localhost:8482/decode', {
                method: 'POST', // or 'PUT'
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
        })

        let text = await response.text(); // read response body as text
        document.querySelector("#decoded").innerHTML = text;
    };
</script>
</html>

Answer 4

我来晚了，但是对于那些只需要使用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"
 }
}

Answer 5

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

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

在脚本中；未声明表单。

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

Answer 6

我找到了一种仅使用HTML表单传递JSON消息的方法。

此示例适用于GraphQL，但它适用于任何需要JSON消息的端点。

默认情况下，GrapqhQL需要一个名为operation的参数，您可以在其中以JSON格式添加查询或变异。在这种情况下，我要调用此查询，该查询请求获取allUsers并返回每个用户的userId。

{ 
 allUsers 
  { 
  userId 
  }
}

我正在使用文本输入来演示如何使用它，但是您可以将其更改为隐藏输入，以向用户隐藏查询。

<html>
<body>
    <form method="post" action="http://localhost:8080/graphql">
        <input type="text" name="operations" value="{&quot;query&quot;: &quot;{ allUsers { userId } }&quot;, "variables":  {}}"/>
        <input type="submit" />
    </form>
</body>
</html>

为了使其动态化，您将需要JS在提交表单之前将文本字段的值传输到查询字符串。无论如何，我发现这种方法非常有趣。希望对您有所帮助。

Answer 7

微库field-assist确实做到了：collectValues(formElement)将从输入字段返回一个 normalized json（这意味着，复选框也为布尔值，选择为字符串）等）。

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

7 个答案: