javascript - 表单转换为错误的 json 格式

Question

我有一个登录表单，我想发送一个包含 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() 的主题，但结果我得到了单个对象的数组

Answer 1

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

.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()将产生:

{"login":"test","password":"test"}

<强> Updated Fiddle