`

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简介** AjaxUpload是一款基于jQuery的插件,它允许用户在无需刷新页面的情况下上传文件。这个插件极大地提升了用户体验,因为它能够实现在后台处理文件上传,同时还可以自定义各种反馈机制,...

    jquery_Switch按钮插件

    jQuery插件是基于jQuery核心库进行扩展的功能模块,开发者可以利用这些插件快速实现特定的交互或视觉效果,比如HoneySwitch,它专注于创建美观、响应式的Switch按钮。 ### 2. HoneySwitch插件特性 - **响应式设计*...

    基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能

    在本项目中,我们利用jQuery Masonry插件来实现瀑布流效果,并结合Ajax技术实现动态加载数据,进一步提升用户体验。 jQuery Masonry插件是由David DeSandro开发的一个JavaScript库,它的主要功能是将网页中的元素以...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    **jQueryPager:基于JQuery的Ajax分页插件Pagination实现** 在Web开发中,当数据量庞大时,分页是一种常见的优化用户体验的方式。jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现...

    jquery+ajax+.net动态分页

    `jquery.pageFoot.js`是一个jQuery插件,专门用于分页功能。它提供了一种简洁的方法来创建和管理分页界面,包括分页按钮的生成、页码的切换逻辑以及与服务器的通信。通过调用这个插件,开发者可以快速地在网站上实现...

    基于jquery的ajax对话框

    总的来说,"基于jQuery的ajax对话框"是一个结合了jQuery、Ajax和对话框插件的网页组件,它允许用户在不离开当前页面的情况下加载和查看新的内容,提高了网页的交互性和用户体验。开发者可以通过定制各种参数和回调...

    ajaxForm插件

    AjaxForm插件基于jQuery库,它监听表单的submit事件,当用户点击提交按钮时,不刷新整个页面,而是通过AJAX方式将表单数据发送到服务器。这样,用户可以继续在当前页面操作,而无需等待页面重载,提高了交互的流畅性...

    jQuery插件,jQuery插件

    jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分,它极大地扩展了jQuery的核心功能,为开发者提供了丰富的功能和便捷的API,以实现各种复杂的网页交互和特效。jQuery插件通常由开发者社区创建并开源,...

    jQuery Ajax分页插件(jquery.pagination)

    `jQuery Pagination Plugin`是针对jQuery设计的一个Ajax分页插件,用于实现高效且用户友好的分页功能。 ### jQuery分页插件的基本概念 1. **Ajax**:异步JavaScript和XML,允许页面与服务器进行通信,更新部分页面...

    jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    标签中提到了知识点的关键词,包括“jQuery”、“datatables插件”、“ajax”、“加载数据”、“增删改查”。这些关键词代表了本文档所要讲述的主要内容。 从【部分内容】中,我们可以提取以下知识点: - 使用HTML...

    jQuery单选多选按钮美化代码插件

    在网页设计和开发中,美观和用户体验是至关重要的因素,jQuery单选多选按钮美化代码插件正是为了提升这方面效果而设计的。这款插件基于`ion.checkRadio.js`,它能够将传统的HTML单选按钮(radio)和复选框(checkbox...

    jquery ajax分页插件

    在Web开发中,jQuery AJAX分页插件是一种用于实现网页数据动态加载的工具,它可以显著提升用户体验,尤其是在处理大量数据时。本篇文章将深入探讨jQuery AJAX分页插件的工作原理、实现方式以及如何使用。 首先,...

    asp.net中利用Jquery+Ajax+Json实现无刷新分页

    为了解决这个问题,我们可以利用jQuery、Ajax和JSON技术来实现无刷新分页。这个主题的"asp.net+Jquery+Ajax+Json"压缩包提供了一个完整的示例,展示了如何在ASP.NET中集成这些技术。 首先,jQuery是一个轻量级的...

    JQuery Ajax 分页插件 jquery_paginator

    `jquery_paginator`插件通过监听用户对分页导航元素的操作(如点击“上一页”、“下一页”按钮),触发Ajax请求,向服务器请求当前页的数据。服务器返回数据后,插件会根据这些数据更新页面上的内容,同时更新分页...

    Jquery插件小集合(ajax 投票 AJAX动态加载广告)

    本集合包含两个特定的jQuery插件,用于实现AJAX投票功能和AJAX动态加载广告,极大地提高了用户体验和页面交互性。 ### 1. AJAX投票功能 在`Rating.asp`、`rating.css`和`Rating.html`文件中,我们可以找到一个基于...

    jquery实现通过按钮弹出表单

    此外,如果你的表单包含更复杂的交互或需要进行数据验证,可以利用jQuery和其他插件,如Bootstrap的Modal插件,或者使用轻量级的SweetAlert2来创建更美观的弹出式表单。在实际应用中,可能还需要考虑表单的关闭逻辑...

    jQuery插件 简单日期设置

    本主题聚焦于"jQuery插件 简单日期设置",这通常指的是利用jQuery来创建一个简单易用的日历插件,只用于选择日期,不涉及时间选择,适用于那些只需要日期输入的场景。 首先,我们了解jQuery插件的基本结构。一个...

    通用表单验证Jquery插件.rar

    通用表单验证Jquery插件是为了提高用户体验和数据安全而设计的。Jquery是一种强大的JavaScript库,它简化了JavaScript的DOM操作,事件处理,动画效果,以及Ajax交互。在这个场景中,我们关注的是Jquery在表单验证中...

    jQuery插件集之(分页插件)初学者必备+Demo

    综上所述,"jQuery插件集之(分页插件)"为初学者提供了一个理想的起点,它可以帮助你快速掌握分页功能的实现,并进一步理解jQuery插件的开发和使用。通过实践提供的Demo和源码,你可以深入理解分页逻辑,为自己的项目...

Global site tag (gtag.js) - Google Analytics