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

Submit form with jQuery (json encoded, ajax, parse original url/method)

本文关键字：原始 url 方法 ajax 表单 提交 json 使用 编码 jQuery      更新时间：2023-09-26

我发现了很多关于在没有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。

我不想为我写的每一个表单都写新的代码。我只想有一个片段，可以自动将上面提到的应用于任何表单。

您可以尝试这样的

$(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;
}

 $(function() {
    $('form').submit(function(){
        $.post(
            $(this).attr('method'), 
            $('form').serialize(),
            function (data) {
                proccessmyData(data);
            }
        );
        return false;    
    });
});

您可以使用proccessmyData（data）编写成功回调函数

相关文章：