jquery實現ajax提交表單信息

最近在思考優化項目，想自己擴展一個jquery自動獲取表單中的數據進行ajax提交。本人沒有完整性學習jquery，基本上是現學現找，有點困難。

主要是擴展和拼接json轉對象

很簡單，附上代碼：

 

; (function ($) {

    $.fn.ajaxForm = function (options) {
        var defaults = {
            modelname: 'model',//后台對象接收名稱
            url: '/',//提交地址
            postType: 'POST',//提交方式
            dataType: 'JSON',//數據返回類型
            async: false,//是否異步
            optionObj: [],//自定義參數
            callback: function () { },//成功回調
        };
        var options = $.extend(defaults, options);//合並參數

        if (options.url == '') {
            alert('請填寫提交地址');
            return;
        }
        var postvals = {};

        //textbox/隱藏域/textarea/radio選中值
        $(this).find('input[type="text"],input[type="hidden"],textarea,input[type="radio"]:checked').each(function () {
            if ($(this).val() != undefined) {
                var name = $(this).attr('name');
                if (name == undefined || name == '') {
                    return false;
                }
                var value = $(this).val();
                var json = '{"' + name + '":"' + value + '"}';
                var obj = $.parseJSON(json);
                postvals = $.extend(postvals, obj);
            }
        });

        var resObj;
        if (options.optionObj != undefined || options.optionObj!=[]) {
            resObj = $.extend(postvals,options.optionObj);
        } else {
            resObj = postvals;
        }

        $.ajax({
            type: options.postType,
            dataType: options.dataType,
            data: resObj,
            async: options.async,
            url: options.url,
            success: function (json) {
                if (json.IsError) {
                    alert(json.Message);
                } else {
                    options.callback();
                }
            }
        });
    };

})(jQuery);
        

　　

使用的話配合jquery validate使用

        $("#system-form").validate({
            rules: {
                SystemName: {
                    required: true
                },
                Description: {
                    required: true,
                },
            },
            messages: {
                SystemName: {
                    required: "請填寫系統名稱"
                },
                Description: {
                    required: "請填寫系統描述"
                }
            },
            submitHandler: function(form) {
                var url = '/oa/system/' + $(form).attr('ftype');
                $(form).ajaxForm({ url: url,modelname:'system', callback: function() {
                    location.href = '/oa/system/index.html';
                } });
            }
        });

　　

 

代碼可能有些問題，有時間看看