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

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

我做错了什么?

最佳答案

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

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

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

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

https://stackoverflow.com/questions/22195065/

相关文章:

sql-server - 在 SQL 中解析 JSON

asp.net-mvc - 将 JsonRequestBehavior 设置为 AllowGet 时

android - 将 ArrayList 转换为 JSONArray

javascript - 是否有任何可公开访问的 JSON 数据源来测试真实世界的数据?

javascript - 无法使用 "-"破折号访问 JSON 属性

json - 如何使用标准 Scala 类在 Scala 中解析 JSON?

javascript - 向 JSON 对象添加新的数组元素

json - curl json 通过终端向 Rails 应用程序发布请求

python - UnicodeDecodeError : 'utf8' codec can't d

python - pickle 还是json?