将表单内容转化成json字符串，并通过ajax提交！

最新推荐文章于 2025-09-08 15:30:27 发布

原创最新推荐文章于 2025-09-08 15:30:27 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #表单 #json #函数 #javascript

java 同时被 3 个专栏收录

26 篇文章

订阅专栏

JQuery

2 篇文章

订阅专栏

json

2 篇文章

订阅专栏

这篇博客介绍了如何利用JQuery自定义方法将表单内容转化为JSON字符串，并通过Ajax进行提交。文中提供了引入JQuery库后直接使用的Ajax提交示例，同时也提及了更新和删除操作，特别指出在URL中传递删除ID的方式。

1.JQuery的自定义方法，直接写个js文件放到里边，用的时候引一下就可以。

(function($) {
    $.fn.extend({
        serializeObject : function() {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [ o[this.name] ];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        }
    });

})(jQuery)

2.引入JQuery的包然后直接用下边的ajax提交就行。

var url = "url";
$.ajax({
    url : url,
    type : 'post',  
    data:$.toJSON($('#form表单的id').serializeObject()),
    contentType : 'application/json;charset=UTF-8',
    success : function(result) {
        alert("成功！");
        },
    error : function() {
        alert("失败!");  
        }
    });

3.更新的

$.ajax({
    url : url,
    type : 'put',   
    data:$.toJSON($('#form表单的id').serializeObject()),
    contentType : 'application/json;charset=UTF-8',
    success : function(result) {
        alert("成功！");
        },
    error : function() {
        alert("失败!");  
        }
    });

4.删除的
url中最后为删除id

$.ajax({
    url : url,
    type : 'get',   
    success : function(result) {
        alert("成功！");
        },
    error : function() {
        alert("失败!");  
        }
    });