首页 > 编程 > JavaScript > 正文

jquery实现ajax提交表单信息的简单方法(推荐)

2019-11-20 09:10:13
字体:
来源:转载
供稿:网友

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

以上这篇jquery实现ajax提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表