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

IT技术 javascript jquery html json forms
2021-01-13 03:15:40

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

我究竟做错了什么？

6个回答

获取完整的表单数据作为数组和 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"
});
您已使用 jQuery 标记了问题。那你在用吗？与$.ajax它真的很容易通过这个数据。
2021-04-06 03:15:40

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

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

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

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

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

  • 你的 JS 没有readystatechange处理程序，所以你什么都不做
  • 单击提交按钮时触发 JS，而不取消默认行为。JS 功能完成后，浏览器将提交表单（以常规方式）。
好的，那么我该如何解决这个问题？
2021-03-18 03:15:40
@user2284570 — 如果您有新问题，请提出一个问题。
2021-03-22 03:15:40
@Quentin：在我的情况下，我需要没有域控制的跨域 POST。
2021-03-26 03:15:40
@EkriirkE——你读过那一页吗？它说，在一个巨大的盒子里，周围有黑色和黄色的危险条纹小心。该规范不再处于积极维护状态，HTML 工作组不打算进一步维护它。
2021-03-31 03:15:40
有一个建议添加enctype='application/json'到表单定义以创建 JSON 数据w3.org/TR/html-json-forms
2021-04-08 03:15:40

我迟到了，但我需要对那些需要对象的人说，只使用 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"
 }
}
这不会发布 json 而是纯表单数据。框架转换为你。我很惊讶这被如此多地投票。
2021-03-18 03:15:40
我没有测试过这个，但这似乎也是一个很好的解决方案。
2021-04-08 03:15:40

您可以尝试以下操作：

<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>

您的代码很好，但从未执行过，提交按钮的原因 [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 参数重定向。
2021-03-16 03:15:40
其它你可能感兴趣的问题
上一篇在 JavaScript 中长按？ 下一篇如何使用 JQuery 获取 GET 和 POST 变量？