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

一尘不染

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

javascript

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

我究竟做错了什么？

阅读 520

2020-04-25

共1个答案

一尘不染

获取完整的表单数据作为数组，并对其进行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"
});

2020-04-25