jquery实现ajax提交表单信息的方法汇总
- 更新时间:2020-03-13 12:31:42
- 编辑:那经纬
最近在思考优化项目,想自己扩展一个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提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。
相关教程
-
jQuery实现响应浏览器缩放大小并改变背景颜色
这篇文章主要介绍了jQuery实现响应浏览器缩放大小并改变背景颜色,比较实用,也很简单,使用到了一个resize事件需要的朋友可以参考下
发布时间:2019-08-29
-
jquery实现倒计时功能
这篇文章主要介绍了jquery实现倒计时功能,详细介绍了setInterval()方法,感兴趣的小伙伴们可以参考一下
发布时间:2019-07-25
-
jQuery UI开发指南
《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历
大小:6.02 MB前端开发电子书
-
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
大小:131.7 MB前端开发电子书
-
锋利的jQuery
《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目
大小:194.9 MBjQuery电子书
-
jQuery EasyUI开发指南
使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种
大小:48.4 MBjQuery电子书
-
JavaScript和jQuery实战手册
JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精
大小:103 MBJavaScript电子书
-
jQuery Mobile从入门到精通
《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开
大小:168.7 MBjQuery
-
jQuery实战
jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外
大小:99.0 MBjQuery电子书
-
jQuery实战案例精粹
jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer
大小:272 MBjQuery电子书