Ajax 只在表单提交时工作一次

Question

我正在尝试在 Wordpress 的用户端创建一个使用 ajax 的登录小部件。我创建了一个表单、ajax 和响应。该表单在测试期间只工作一次（就目前而言，我只是在测试对 ajax 请求的响应）。

这是我的代码：

表格：

<form class="fs-login" autocomplete="off" novalidate method="post">
<div class="uk-child-width-auto">
    <div>
        <div class="uk-card uk-card-default uk-card-small uk-card-body">
            <div class="uk-inline uk-width-1-1">
                <span class="uk-form-icon" uk-icon="icon: user"></span>
                <input class="uk-input uk-form-small" name="username" type="text">
            </div>
            <div class="uk-inline uk-width-1-1">
                <span class="uk-form-icon" uk-icon="icon: lock"></span>
                <input class="uk-input uk-form-small" name="password" type="password">
            </div>
            <button id="fs-login-button" type="submit" class="uk-button uk-button-small uk-width-1-1">Login</button>
        </div>
        <div class="uk-text-small uk-text-center">
            Not registered? <br/><a href="#">Create an account</a>
        </div>
    </div>
</div>

jquery：

jQuery(document).ready(function($){
'use strict';

$('.fs-login').on('click', '#fs-login-button', function (){

    var username = $("input[name=username]").val();
    var password = $("input[name=password]").val();

    // if(username.length > 0) {

        $.ajax({

            method: "POST",

            url: ajaxurl,

            data: { 

                'action'        : 'ajaxlogin',

                'username'      : username,

                'password'      : password

            },

            success: function(data){

                if (data.success == true){

                    alert('pass');

                } else {

                    alert('fail');

                }

            }

        });

    // } else {

    //  alert('You have to enter your username');

    // }

});

});

这是我的功能：

public function ajax_login(){

    $data = array( 'success'=>true );

    wp_send_json( $data );

    wp_die();

}

是的，我的文件中添加了以下代码：

wp_localize_script( $this->plugin_name, 'ajaxurl', admin_url( 'admin-ajax.php' ) );

除了：

$this->loader->add_action( 'wp_ajax_ajaxlogin', $plugin_public, 'ajax_login' );
$this->loader->add_action( 'wp_ajax_nopriv_ajaxlogin', $plugin_public, 'ajax_login' );

正如我所说，我第一次运行 ajax 时它的功能很好。我得到了 jQuery 警报弹出窗口。我第二次运行该程序时，没有弹出窗口，并且脚本似乎发布并加载了一个新页面，但没有解析任何函数。

我们总是感谢任何帮助。

迈克

Answer 1

仅仅看它，我猜你可以做两件事：

1. 例如在提交处理程序上返回 false：

<form onsubmit="return false;" ...

1. 也许您还需要扩展您的点击处理程序，例如：

... '#fs-login-button', function (e){ e.preventDefault()

要实现防止提交表单非ajax，谷歌你必须这样做