`

jQuery 插件 ajax 按钮

阅读更多

jQuery 插件参数获取  options

 

 

(function ($, window) {
    $.fn.ajaxButton = function (options) {

        var AjaxButton = function (clickedBut, opts) {
            this.clickedBut = clickedBut;
            this.opts = opts;
        };

        AjaxButton.prototype = {
            constructor: AjaxButton,
            _disableView: function () {
                this.clickedBut.html('<i class="fa fa-spin"><i class="fa fa-spinner"></i></i>' + this.opts.text);
                this.clickedBut.attr("disabled", true);
            },
            _recoverView: function () {
                this.clickedBut.html(this.opts.html);
                this.clickedBut.attr("disabled", false);
            },
            _runAjax: function () {
                this._disableView();
                var me = this;
                jQuery.ajax({
                    type: this.opts.method,
                    url: this.opts.url,
                    data: this.opts.params,
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            console.log('成功:', data.msg);
                        } else {
                            console.log('失败:', data.msg)
                        }
                        me.opts.callback(data);
                        me._recoverView();
                    }, error: function (data) {
                        console.log(' >>>>> Error:', data);
                        me._recoverView();
                    }
                });
            }
        };

        this.each(function () {
            var $button = $(this),
                opts = jQuery.extend({html: $button.html(), text: $button.text(), url: $button.data('url'),
                    confirmText: $button.data('confirm'), callback: function (data) {
                    }, editData: function (data) {
                    }}, options || {});
            opts.params = $.extend({}, $button.data());
            opts.method = $button.data('method') || 'get';
            $.each(['url', 'confirm', 'method'], function (i, v) {
                delete opts.params[v]
            });
            $button.on('click', function () {
                var $this = $(this);
                opts.editData(opts);
                if (!opts.confirmText || window.confirm(opts.confirmText)) {
                    var button = new AjaxButton($this, opts);
                    button._runAjax();
                }
                return false;
            })
        });
    }
}(jQuery, window));

 

 jQusery 获取表单的值

  $form.serializeArray()

分享到:
评论

相关推荐

    jquery插件ajaxupload实现文件上传操作

    本文实例讲述了jquery插件ajaxupload实现文件上传操作代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1、创建页面并编写HTML 上传文档:  ...

    jquery验证插件,脚本验证插件

    当前版本外调插件可以实现文件上传检测、密码强度检测和日期控件效果; 支持ajax提交表单数据,也支持ajax实时反馈验证结果(如常见的用户注册表单下的用户名检测); 支持开启网速慢时的二次提交防御(有时连续...

    新浪微博表情jQuery插件

    表情功能的实现虽说不难,但却比较繁琐,首先要了解新浪微博开放平台的表情API,然后通过某种方式调用,如果通过网页后台代码直接读取储存到JavaScript变量中,又会拖慢网页加载速度,如果采用AJAX读取,又要解决...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款...

    jQuery图片批量上传插件源码

    资源名:jQuery图片批量上传插件源码 资源类型:程序源代码 源码说明:实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复上传,且不能移除 使用方法 界面顶部引入IMGUP....

    jQuery 表单验证插件

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...

    formwizard:基于jQuery UI的jQuery插件,可将表单转换为多步向导。 与用于提交AJAX表单的jQuery表单插件,用于客户端验证的验证插件以及用于启用浏览器后退和前进按钮的BBQ插件集成在一起

    该插件通过与以下jQuery插件集成来支持AJAX表单提交,表单验证以及浏览器的后退和前进按钮: jQuery表单 jQuery验证 用法 显然,请确保具有正确的包含-该插件已通过以下版本进行了测试,但也应与较新的版本一起...

    jquery 动态示例

    73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款基于...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片...jQuery演示Ajax加载并显示图片的相片画廊实例 jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) jquery版自动滚动图片动画特效插件

    使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。 代码如下 使用方法如下 [removed] $(function () { var button = $('#upload'); new AjaxUpload...

    jQuery基于Ajax方式提交表单功能示例

    本文实例讲述了jQuery基于Ajax方式提交表单功能。分享给大家供大家参考,具体如下: ...2、页面引入jQuery的表单插件jQuery.form.js 二、实施 1、页面中的表单 &lt;form id="mainForm" method="post" enctype="multipa

    jQuery与Ajax以及序列化

    •无需插件支持 •优秀的用户体验 •提高web程序的性能 •减轻服务器和带宽的负担 Ajax的不足 •浏览器兼容不足 •破坏浏览器前进和后退按钮的正常功能 •对搜索引擎的支持不足 •开发和调试工具的 缺乏 好吧,...

    jQuery fDialog弹出层插件 v1.0.1.rar

    jQuery fDialog弹出层插件基于jQuery实现,本插件所生成的弹出层兼容性特别好,几乎能兼容包括IE6在内的所有常用浏览器。同时弹出层上所有元素都可自定义,样式也可重新定义,本次上传的jQuery fDialog是一个更新...

    toAjax:阻止常规表单操作并使用 AJAX 的 jQuery 插件

    到阿贾克斯阻止常规表单操作并使用 AJAX 的 jQuery 插件。 为什么我决定想出这个插件? 编码是关于优化的。 这个插件节省了我的时间,并允许更干净的 html 输出(更少的代码)。 这个插件是如何工作的? 对于您使用...

    UploadLargeFiles:使用进度条和提交按钮(laravel 5.1 + jQuery + Ajax)上传大文件(仅ppt,pptx,pdf)

    上载大文件(Laravel 5.1 | jQuery | jQuery Form |进度栏) 使用进度条和提交按钮(laravel 5.1 + jQuery + Ajax)上传大文件(仅ppt,pptx,pdf)特征控制器: 验证类型和大小文件使用用户ID和日期重命名文件名将...

    jQuery分页代码:无刷新ajax的翻页效果.rar

    jQuery分页代码:无刷新ajax的翻页效果,简单说一下这个插件所要实现的功能,后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示。有上一页,下一页,首页,尾页的功能。在第一页时,...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款基于...

    绝对好用的jquery表单全自动验证插件

    插件名称:jquery表单验证插件 V1.0 插件作者:zy8008 最后更新:2011-4-28 插件说明: datatype类型说明: --------------------------------------- *:必填写,可为任意字符 number:数字 zip:邮政编码 mobile...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...

    jquery小插件--表格树--GridTree(过期版本)

    自己写的一个基于jquery的小插件,实现了表格树的基本功能,尽量实现了JQTreeTable的基本功能并实现了前台分页,以及可以添加自定义列。支持json数据格式。 最新版本http://download.csdn.net/source/1757010 ...

Global site tag (gtag.js) - Google Analytics