表单转换为错误的 json 格式答案

【问题标题】：Form convert to wrong json format表单转换为错误的 json 格式
【发布时间】：2015-05-23 18:51:52
【问题描述】：

我有一个登录表单，我想发送一个包含 json 的帖子。

这是我到目前为止所做的。

<form id="myForm">
    Login
    <input  id="login" type="text" name="login" value=""/>
    Password
    <input id="password" type="password" name="password" value=""/>
    <button type="submit" >Login</button>
</form>

还有我的js文件

$("#myForm").submit(function(event) {
    var frm = $("#myForm");
    var data = JSON.stringify(frm);

    event.preventDefault();

    $.ajax({
        url: "/register/",
        data: data,
        type: "POST",
        contentType: "application/json"
    });
});

这里是 jsfiddle https://jsfiddle.net/p143s6tp/

我希望 json 看起来像这样：

{ 
   "login" : "some_value",
   "password" : "some_value"
}

但我得到了这个：

{"0":{"0":{},"1":{},"2":{}},"length":1,"context":{"location":{}},"selector":"#myForm"}

我阅读了一些人们使用 .serializeArray() 的主题，但结果我得到了单个对象的数组

【问题讨论】：

jQuery 对象上的 JSON.stringify() 将字符串化 jQuery 对象，而不是来自表单元素的数据。
正如您自己所指出的，您必须使用 .serializeArray() 返回名称和值的数组。然后您可以使用 Array 的方法将其转换为所需的格式

标签： javascript jquery json

【解决方案1】：

您正在对选择器 $("#myForm"); 返回的表单 jQuery 对象进行字符串化。

.serializeArray() 将产生以下格式的输出（名称、值对），

[{"name":"login","value":"test"},{"name":"password","value":"test"}]

您可以修改.serializeArray()返回的输出。

var frm = $("#myForm");
var formData = frm.serializeArray();
var data = {};
$.map(formData, function (obj,i) {
    data[obj['name']] = obj['value'];
});

应用JSON.stringify() 将产生：

{“登录”：“测试”，“密码”：“测试”}

Updated Fiddle

【讨论】：

一个问题可能是 OP 想要以 JSON 格式发送数据（尽管实际上它可能需要是 x-www-form-urlencoded）。
不幸的是，它不起作用。我写了这个 var frm = $("#myForm").serialize();其余代码我保持不变。结果帖子看起来像这样：“login=dsad&password=dsad”而不是 json
我知道我可以获得一个对象数组（正如我在第一篇文章中所写的那样），但我想要一个对象。我正在使用杰克逊，它会自动将其转换为我的 java 对象，所以我必须具有我的第一篇文章中描述的格式

【解决方案2】：

最简单的方法：

var login = $('#login').val();
var password = $('#password').val();

$("#myForm").submit(function(event) {

    $.ajax({
        url: "/register/",
        data: {'login':login,'password':password},
        type: "POST",
        success: function(data) {
            alert(data);
        }
    });
});

PHP

$login = $_POST['login'];
$password = $_POST['password'];

echo 'login:' . $login . ' - password: ' . $password;

【讨论】：

在我的应用程序中，它比我在 jsfiddle 中编写的对象更复杂，如果有一种方法可以自动完成它会很好，但是谢谢

【解决方案3】：

$("#myForm").submit(function(event) {
    var frm = $("#myForm");
    var data = frm.serialize();

    event.preventDefault();

    $.ajax({
        url: "/register/",
        data: JSON.stringify(data),
        type: "POST",
        contentType: "application/json"
    });
});

【讨论】：

不工作，结果我得到 {"error": "Please use POST request"}

【解决方案4】：

正如您自己所说，您必须使用.serializeArray()。它返回名称和值的数组，您可以使用 Array 的方法将其转换为所需的格式。

类似这样的：

var data = {};
frm.serializeArray().forEach(function(el) {
    data[el.name] = el.value;
});
var json = JSON.stringify(data);

【讨论】：

不起作用。我不知道为什么，但是在提交之后是获取而不是发布
@Yeynno 究竟什么是“不工作”？提供详细解释
非常抱歉，它也可以正常工作。我认为 jsfiddle 以某种方式缓存了以前的代码，或者我做错了什么。