尝试创建可重用的自定义 ajax 表单插件

Posted 2023-05-09

【中文标题】尝试创建可重用的自定义 ajax 表单插件

【英文标题】：Trying to create reusable custom ajax form plugin

【发布时间】：2020-04-10 15:59:45

【问题描述】：

更新的代码 - 工作

(function($) 

    $.fn.mbajaxform = function( mbopts ) 

        var mb_form_items       = $(this).find('input, submit, button'),
            mb_form_type        = mb_mbtheme_js[0],
            mb_get_page_slug    = mb_mbtheme_js[1],
            mb_redirect         = mb_mbtheme_js[2],
            mb_redirect_time    = mb_mbtheme_js[3],
            mb_form_disable     = mb_mbtheme_js[4];

        // create the defaults
        let mbdefaults = 
                beforeSend: function( el, beforeSend ) 
                            ,

                success:    function( el, success ) 
                            ,

                complete:   function( el, complete ) 
                            ,

                error:      function( el, error ) 
                            
        ;


        // extend the defaults
        let mboptions = $.extend( , mbdefaults, mbopts );

        return this.each( function() 

            // the variable for this
            var $this = $(this);

            function beforesend_callback(e) 
                mboptions.beforeSend( $this, e );
            

            function success_callback(e) 
                mboptions.success( $this, e );
            

            function complete_callback(e) 
                mboptions.complete( $this, e );
            

            function error_callback(e) 
                mboptions.error( $this, e );
            


            // run the function
            $this.on( mb_form_type, function(mb) 

                // stop the default function of buttons
                mb.preventDefault();

                var mb_ajax_form_data = new FormData( $this[0] );

                // do the ajax
                $.ajax(
                    method:         "POST",
                    data:            mb_ajax_form_data,
                    contentType:    false,
                    processData:    false,
                    beforeSend:     beforesend_callback,
                    success:        success_callback,
                    complete:       complete_callback,
                    error:          error_callback
                );
            );

        );
    ;
( jQuery ));


$("#mbform").mbajaxform();

---

原始问题

这是我第一次尝试创建插件，但我遵循了一些教程，希望它能够首先工作 - 新手！

我注意到一个 AJAX 表单在我的网络中的几个子站点（使用 Wordpress 多站点）中重复出现（例如密码重置、主题设置、用户创建），因此我认为它可能更有益于创建一个可以扩展的函数（如果需要更改），否则应用默认值。

查看旧代码的编辑修订

【问题讨论】：

阻止按钮单击的默认操作不会阻止提交表单。您必须监听表单的提交事件并阻止其默认操作。

@Teemu 当我在插件之外运行脚本时，preventDefault 工作

原来我有一些导致问题的原因：1. js 文件的位置不正确，2. 在另一个默认变量中调用默认变量，一些命名 - 我已经更新了问题拥有工作代码

【参考方案1】：

乍一看，您可能没有引用正确的选项变量。

您将其设置为名称mboptions

 let mboptions = $.extend(, mbdefaults, mbopts);

但随后尝试使用 options 访问它

options.beforeSend($this, e);

当您尝试绑定提交事件时，您不会从选项对象访问事件名称。所以不是

$this[mb_form_type](function(mb) ...);

我觉得

$this.on(mboptions.mb_form_type, function(mb) ...):

更具可读性（如果需要，您也可以稍后删除与 this.off(mboptions.mb_form_type) 的绑定；）

【讨论】：

谢谢你，我在复制和粘贴时没有注意到。虽然还是不行

您是否在控制台中遇到错误？您需要打开保留登录才能在页面发布后查看消息

没有错误，据我所知，return this.each(function() 之后的任何内容

阅读您的代码还有一些事情，变量mb_ajax_form_links 在表单提交处理程序中声明，但您正试图在其他函数中访问它，因此它超出了它们的范围。由于您正在寻找表单中的交互元素，我认为您可以将 $(mb_ajax_form_links) 替换为 el.find('input, select, button')

另外你不想在你的ajax参数对象中执行函数，你只需要引用它们，所以你需要beforeSend: beforesend_callback(),而不是beforeSend: beforesend_callback,等