Question

每次登录失败时，我都会尝试在登录表单上使用“摇动”效果。问题是我无法使用Jquery的.attr（）方法获取<form>属性（类型，方法等），因为它总是返回undefined。有趣的是，<form>每次都会震动。

HTML表格

<form name="loginForm" id="loginForm" method="post" action="http://127.0.0.1/appnut/login">
    <table>
        <tr>
            <td><label>Usuario:</label>  </td>
            <td><input name="username" type="text" size="32" maxlength="32" /></td>
        </tr>
        <tr>
            <td><label>Password:</label> </td>
            <td><input name="password" type="password" size="32" maxlength="32" /></td>
        </tr>
    </table>
    <input type="submit" value="Iniciar Sesion" />
</form>

使用Javascript：

<script type="text/javascript"
            src="public/js/jquery.js"></script>
    <script type="text/javascript"
            src="public/js/jquery_effects.js"></script>
    <script type="text/javascript"
            src="public/js/jquery_shake.js"></script>
    <script>
        $(document).ready(function() {
            var attempts = 0; // number of Login attempts
            var initialShakes = 3; // number of shakes on first failed attempt
            var maxShakes = 10; // maximum number of shakes

            // Login form submit event
            $("#loginForm").submit(function() {
                var isLoginValid = false;
                var form = $("#loginForm");
                $.ajax(
                    {   type: form.attr("type"),
                        url:form.attr("action"),
                  //******THESE TWO WILL RETURN UNDEFINED AND 
                  //******THE AJAX CALL WILL FAIL
                        data:$(form).serialize(),
                        success: function(data){
                            alert(data);
                            isLoginValid=TRUE;
                        }
                    }
                );

                if (isLoginValid)
                {
                    alert("true");
                    // Your code for valid login goes here.......
                }
                else
                {
                    alert("false");
                    // Shake the form because Login is not valid
                    shakeLoginForm();

                    attempts++;
                }

                return false;
            });

            function shakeLoginForm() {
                // Determine how many times the form will shake.
                // Initially, it will start from the value of initialShakes,
                //   then increase by 1 on every failed attempt.
                // The following assures that the number
                //   of shakes will not exceed the specified maximum.
                var shakeTimes = Math.min(initialShakes + attempts, maxShakes);

                // The single line code to shake the form.
                $("#loginForm").effect("shake", { times: (shakeTimes) });
            }
        });
    </script>`

Answer 1

尝试

$(document).ready(function() {
    var attempts = 0; // number of Login attempts
    var initialShakes = 3; // number of shakes on first failed attempt
    var maxShakes = 10; // maximum number of shakes

    // Login form submit event
    $("#loginForm").submit(function() {
        var form = $(this); // use this since it points to the submitted form
        $.ajax({
            type : form.attr("method"), // there is no type attribute, it is method in the form
            url : form.attr("action"),
            data : form.serialize(),
            success : function(data) {
            }
        }).fail(function() { //change the error handler to use ajax callback because of the async nature of Ajax
            alert("false");
            // Shake the form because Login is not valid
            shakeLoginForm();

            attempts++;
        }).done(function() {
            alert("true");
            // Your code for valid login goes here.......

        });

        return false;
    });

    function shakeLoginForm() {
        // Determine how many times the form will shake.
        // Initially, it will start from the value of initialShakes,
        // then increase by 1 on every failed attempt.
        // The following assures that the number
        // of shakes will not exceed the specified maximum.
        var shakeTimes = Math.min(initialShakes + attempts, maxShakes);

        // The single line code to shake the form.
        $("#loginForm").effect("shake", {
            times : (shakeTimes)
        });
    }
});

Answer 2

在代码而不是类型中使用方法。

我已尝试访问attr，如下所示，我能够完美地完成以下操作。

alert($("#loginForm").attr("method"));

alert($("#loginForm").attr("action"));

在您的代码中：

form.attr("method")

而不是

 form.attr("type")

Answer 3

ofc它会导致你未定义：

type: form.attr("type"),

那里没有这样的类型，也许你指的是

type: form.attr("method"),

无法使用JQuery和Ajax </form>访问<form>属性

3 个答案: