jquery实现ajax提交表单信息

最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交。本人没有完整性学习jquery,基本上是现学现找,有点困难。

主要是扩展和拼接json转对象

很简单,附上代码:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
; (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使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#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';
        } });
    }
});

  

 

代码可能有些问题,有时间看看

posted on   Jade_K  阅读(1933)  评论(1编辑  收藏  举报

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示