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

小编典典

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

all

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

我究竟做错了什么？

阅读 105

2022-08-27

共1个答案

小编典典

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

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

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

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

2022-08-27