Question

这是我的register.js页面的代码：

$(document).on('pagecreate', '#register', function() {
    $('#submit').click(function() {
        $('.frmFields').removeClass('error');
        var errors = 0;

        var fields = {
            username: $('#username'),
            name: $('#name'),
            email: $('#email'),
            password: $('#password'),
            vPassword: $('#password_verify'),
            dob: $('#dob')
        };

        $.each(fields, function(key, value) {
            if (value.val() == '') {
                value.addClass('error');
                errors++;

                alert('שדה ' + key + ' הינו שדה חובה');
            }

            if (key == 'name') {
                if (!isText(value.val())) {
                    value.addClass('error');
                    errors++;

                    alert('שדה שם חייב להכיל טקסט בלבד');
                }
            }

            if (key == 'email') {
                if (!isEmailAddress(value.val())) {
                    value.addClass('error');
                    errors++;

                    alert('שדה דואר אלקטרוני חייב להכיל כתובת תקנית');
                }
            }
        });

        if (fields.password.val() != fields.vPassword.val()) {
            vPassword.addClass('error');
            errors++;

            alert('הסיסמאות שהקלדת אינן זהות');
        }

        function checkUsername(uname) {
            var valid = false;

            $.ajax({
                url: './actions/checkUsername.php',
                type: 'GET',
                async: false,
                data: {
                    username: fields.username.val()
                },
                success: function(resp) {
                    if (resp == "success")
                        $('#valid').val('true');
                    else
                        $('#valid').val('false');
                }
            });
        }

        checkUsername(fields.username.val());

        if ($('#valid').val() == 'true') {
            $.ajax({
                url: './actions/register.php',
                type: 'POST',
                data: fields,
                success: function(resp) {
                    if (resp == "success") {
                        alert('yay!');
                    } else
                        alert(resp);
                }
            });
        } else
            alert('שם המשתמש שבחרת תפוס');
    });
});

一切正常，数据正确发送，只是我收到错误：

过多的递归

这是因为最后一次$ .ajax调用。我用$ .post尝试了它，它也是这样。

如何正确执行此操作以便我不会收到此错误？

Answer 1

问题是你在ajax调用的数据部分传递jQuery对象。取而代之的是。

    var data = {
        username: $('#username').val(),
        name: $('#name').val(),
        email: $('#email').val(),
        password: $('#password').val(),
        vPassword: $('#password_verify').val(),
        dob: $('#dob').val()
    };

        $.ajax({
            url: './actions/register.php',
            type: 'POST',
            data: data,
            success: function(resp) {
                if (resp == "success") {
                    alert('yay!');
                } else
                    alert(resp);
            }
        });

Answer 2

这就是我要做的事情：

$(document).one('pagecreate', '#register', function() {
    $('#submit').click(function() {
        $('.frmFields').removeClass('error');
        var errors = 0;

        // BUG HERE - Take a look at @Musa's answer
        var fields = {
            username: $('#username'),
            name: $('#name'),
            email: $('#email'),
            password: $('#password'),
            vPassword: $('#password_verify'),
            dob: $('#dob')
        };

        $.each(fields, function(key, value) {
            if (value.val() == '') {
                value.addClass('error');
                errors++;

                alert('שדה ' + key + ' הינו שדה חובה');
            }

            if (key == 'name') {
                if (!isText(value.val())) {
                    value.addClass('error');
                    errors++;

                    alert('שדה שם חייב להכיל טקסט בלבד');
                }
            }

            if (key == 'email') {
                if (!isEmailAddress(value.val())) {
                    value.addClass('error');
                    errors++;

                    alert('שדה דואר אלקטרוני חייב להכיל כתובת תקנית');
                }
            }
        });

        if (fields.password.val() != fields.vPassword.val()) {
            vPassword.addClass('error');
            errors++;

            alert('הסיסמאות שהקלדת אינן זהות');
        }

        function registerUsername() {
            if ($('#valid').val() == 'true') {
                $.ajax({
                    url: './actions/register.php',
                    type: 'POST',
                    data: fields,
                    success: function(resp) {
                        if (resp == "success") {
                            alert('yay!');
                        } else
                            alert(resp);
                    }
                });
            } else
                alert('שם המשתמש שבחרת תפוס');
            }
        }

        $.ajax({
            url: './actions/checkUsername.php',
            type: 'GET',
            async: false,
            data: {
                username: fields.username.val()
            },
            success: function(resp) {
                if (resp == "success")
                    $('#valid').val('true');
                else
                    $('#valid').val('false');
                registerUsername();
            }
        });       
    });
});

我已更改$(document).on('pagecreate', '#register', function() { 至 $(document).one('pagecreate', '#register', function() {，以防止click按钮上的多个#submit绑定
在检查用户名有效期

之后进行了名为的注册登录

请注意，您可以将registerUsername函数放在click事件之外，使其可用于'registerUsername'函数所在范围内的其他函数。

修改

另一种方法是将click事件委托给元素：

$(document).on('click', '#register #submit', function() { -- PUT HERE THE SUBMIT LOGIC -- });

这样您就不需要使用pagecreate事件，因为您将click事件绑定到按钮，即使它在DOM中仍然不存在（谢谢< strong> @charlietfl - 现在我明白你在下面的评论中的意思了。）

请注意，最终 @Musa 的回答是正确的。但是我也会在这里留下我的答案，因为事件委托建议以及你在register.php电话完成之前呼叫checkUsername.php的事实（我的答案显示了可能的替代方案）

对ajax请求的递归过多

2 个答案: