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

Question

我发现了很多关于在没有 json 的情况下提交表单以及在 javascript 代码中静态指定 url 和方法提交表单的问题。

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

例如这样的表单

<form role="form" action="api/login" method="POST">
  <input name="email" value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583521183d35393134763b3735" rel="noreferrer noopener nofollow">[email protected]</a>" 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": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4899da48189858d88ca878b89" rel="noreferrer noopener nofollow">[email protected]</a>",
    "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;
}