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';
                } });
            }
        });
代码可能有些问题,有时间看看
jquery实现ajax提交表单信息的更多相关文章
- jquery实现ajax提交表单
		一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ... 
- php使用jquery Form ajax 提交表单,并上传文件
		在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ... 
- 利用jquery进行ajax提交表单和附带的数据
		1.获取表单数据: $form.serialize() 2.附带数据:input[status]=1 3.构造url链接:url = $form.attr('action') + '?input[st ... 
- jquery 通过ajax 提交表单
		1.需要引入以下两个js文件 <script src="Easyui/jquery-1.7.2.min.js"></script> <scrip ... 
- jquery实现ajax提交表单的方法总结
		方法一: 分别获取所需数据元素,DOM结构外层不用包form标签(适用于数据量少,数据元素分散于整个页面) $.ajax({ type: 'POST', url:'', data: { residen ... 
- jQuery序列化Ajax提交表单
		var formData=$("form").serialize(); $.ajax({ type: "POST", url: "/front/EPt ... 
- jquery实现ajax提交表单数据或json数据
- Jquery ajax提交表单几种方法
		在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ... 
- Jquery ajax提交表单几种方法详解
		[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ... 
随机推荐
- 技术笔记:Indy控件发送邮件
			工作中有个需求需要发送邮件,因为使用的delphi6,所以自然就选择了indy组件,想想这事挺简单的.实现的过程倒是简单,看着Indy的demo很快就完了,毕竟也不是很复杂的功能. 功能要求: 1.压 ... 
- C#与C++的发展历程第一 - 由C#3.0起
			俗话说学以致用,本系列的出发点就在于总结C#和C++的一些新特性,并给出实例说明这些新特性的使用场景.前几篇文章将以C#的新特性为纲领,并同时介绍C++中相似的功能的新特性,最后一篇文章将总结之前几篇 ... 
- .NET全栈开发工程师学习路径
			PS:最近一直反复地看博客园以前发布的一条.NET全栈开发工程师的招聘启事,觉得这是我看过最有创意也最朴实的一个招聘启事,更为重要的是它更像是一个技术提纲,能够指引我们的学习和提升,现在转载过来与各位 ... 
- 如何从本地导入.nupkg文件
			买了本asp.net mvc4高级编程 里面的源码下载下来是.nupkg后缀的文件,不知道怎么引入到项目中, baidu无果,只好google,可怜我英语四级都难的人,不过所幸还是找到了方法: htt ... 
- CSharpGL(37)创建和使用VBO的最佳方式
			CSharpGL(37)创建和使用VBO的最佳方式 开始 近日在OpenGL红宝书上看到这样的讲解. 其核心意思是,在创建VBO时用 glBufferData(GL_ARRAY_BUFFER, len ... 
- linux shell 中的sleep命令
			开始还以为是这样的语法: sleep(1), 后面发现是: linux shell 中的sleep命令 分类: LINUX 在有的shell(比如linux中的bash)中sleep还支持睡眠(分,小 ... 
- Jquery
			使用时jquery先引进jquery文件包 <script src="jquery-1.11.2.min.js"></script> 一个页面有多个文件jq ... 
- 05.GitHub实战系列~5.发布版本之分支操作+Tag讲解 2015-12-14
			GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ... 
- Bootstrap3系列:下拉菜单
			1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ... 
- 定时管理器框架-Task.MainForm
			入住博客园4年多了,一直都是看别人的博客,学习别人的知识,为各个默默无私贡献自己技术总结的朋友们顶一个:这几天突然觉得是时候加入该队列中,贡献出自己微弱的力量,努力做到每个月有不同学习总结,知识学习的 ... 
