javascript - 使用 jQuery 提交表单(json 编码，ajax，解析原始 url/方法)

Question

我发现很多关于不带json提交表单和在javascript代码中静态指定url和方法提交表单的问题。

但我真正想要的是一种方法，让我的所有表单都按照表单最初指定的方式发送 ajax 请求，唯一的区别是我希望数据是 json 编码的。

例如像这样的表单

<form role="form" action="api/login" method="POST">
  <input name="email" value="my@email.com" type="text"/>
  <input name="password" value="mypassword" type="text"/>
  <button type="submit">Login</button>
</form>

提交时应该自动生成这样的ajax请求:

POST /api/login HTTP/1.1
Content-type: application/json

{
    "email": "my@email.com",
    "password": "mypassword"
}

无需我再次在 javascript 代码中指定方法或 url。

而且我不想为我编写的每个表单编写新代码。我只是希望有一个片段可以自动将上述内容应用于任何表单。

Answer 1

你试试这样的东西

$(document).on('submit','form',function(e){
    e.preventDefault();
    $form = $(this);

    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: getObject($form.serializeArray()),
        success: function (response) {
            //Success Handler
        }
    });
    return false;
});

function getObject(data) {
    var paramObj = {};
    $.each(data, function(_, kv) {
        if (paramObj.hasOwnProperty(kv.name)) {
            paramObj[kv.name] = $.makeArray(paramObj[kv.name]);
            paramObj[kv.name].push(kv.value);
        }
        else {
            paramObj[kv.name] = kv.value;
        }
     });
     return paramObj;
}