您的位置 首页 网络技术

submithandler 表单提交

submithandler 表单提交

最近在思考优化项目,想自己扩展一个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';

} });

}

});

 

花猫大叔总结了2020年抖音变现玩赚指南-进阶版的电子书 免费获取

链接: https://pan.baidu.com/s/1S7lF9AQAX2pdESlhF9Rl8Q

提取码:u8yv

 

关于花猫大叔短视频创业 作者: hadoopall

热门文章

发表评论

电子邮件地址不会被公开。