zoukankan      html  css  js  c++  java
  • 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';
                    } });
                }
            });
    

      

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

    作者:王家大人
    出处:http://wms01.cnblogs.com
    限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。
    声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    xml在html中的使用
    getElementsByTagName的用法
    opener 的使用
    动态增加属性
    innerText, innerHTML,outerHTML
    button的css属性
    动态改变select中option的次序
    input 的样式
    zkw线段树
    接着吐槽(2012/5/23)
  • 原文地址:https://www.cnblogs.com/wms01/p/5799170.html
Copyright © 2011-2022 走看看