0

我有一个脚本，可以在访问者继续之前告诉访问者用户名是否已经存在，下面是我的代码的一部分；

编辑：好的，我已经阅读了你们所说的，并对其进行了修改，但我仍然无法使用它：S，我的老师也不知道......

<script type="text/javascript">
jQuery(document).ready(function(){

    // Smart Wizard     
    jQuery('#wizard').smartWizard({onFinish: onFinishCallback, onLeaveStep: onNextStep});
    function onNextStep(){
        validateSteps(function (next) { return next; });
    }   
    function onFinishCallback(){
        alert('Finish Clicked');

    } 
    function UsernameExist(fullname, callback)
    {
        var data = 'user='+ fullname;
        if(fullname) {
            $.ajax({
                type: "POST",
                url: "user_check.php",
                data: data,
                async: false,
                beforeSend: function(html) {
                    $("#msg_lastname").html('');
                },
                success: function(html){ 
                    $("#msg_lastname").show();
                            $("#msg_lastname").append(html);
                    if(html.search("red") != -1)
                    {
                        callback(false);
                    }
                    else
                    {
                        callback(true);
                    }
                }
            });
        }
   }
    function validateSteps(callback){
        var isStepValid = true;
        // validate step 1
        var firstname = $('#firstname').val();
       if(!firstname || (firstname.length < 3 || firstname.length > 10))
       {
            $('#msg_firstname').html('<br/><font color="red">Enter a first name, between 3 and 10 letters.</font>').show();
            isStepValid = false;
       }
       else
       {
         $('#msg_firstname').html('').hide();
       }
       var lastname = $('#lastname').val();
       if(!lastname || (lastname.length < 3 || lastname.length > 14))
       {
            $('#msg_lastname').html('<br/><font color="red">Enter a last name, between 3 and 14 letters.</font>').show();
            isStepValid = false;
       }
       else
       {
         $('#msg_lastname').html('').hide();
       }

       var gender = $('#gender').val();
       if(!gender || Number(gender) == -1)
       {
            $('#msg_gender').html('<br/><font color="red">Choose your gender!</font>').show();
            isStepValid = false;
       }
       else
       {
         $('#msg_gender').html('').hide();
       }
       var age = $('#age').val();
       if(!age || Number(age) > 90 || Number(age) < 21)
       {
            $('#msg_age').html('<br/><font color="red">Enter a age between 21 and 90.</font>').show();
            isStepValid = false;
       }
       else
       {
         $('#msg_age').html('').hide();
       }
       var pin = $('#pin').val();
       if(!pin || pin.length > 10 || pin.length < 4)
       {
            $('#msg_pin').html('<br/><font color="red">Enter a PIN between 4 and 10 numbers.</font>').show();
            isStepValid = false;
       }
       else
       {
         $('#msg_pin').html('').hide();
       }
       if (isStepValid) {
            UsernameExist(firstname + ' ' + lastname, function (exists) {
                callback( exists );
            });
        } else {
            callback( false );
        }

    }   
    jQuery('select, input:checkbox').uniform();

});
</script>

现在的问题是，当我运行这个脚本时，它返回未定义，我猜是因为 UsernameExist 完成得不够快，而且似乎返回 UsernameExist 出于某种原因没有等待它......

4

4 回答 4

0

您只需将async选项设置为false

function UsernameExist(fullname, callback) {
    var data = 'user=' + fullname;
    if (fullname) {
        $.ajax({
            type: "POST",
            url: "user_check.php",
            data: data,
            async: false,
            beforeSend: function (html) {
                $("#msg_lastname").html('');
            },
            success: function (html) {
            //your code after success
            }
        });
    }
}

来自 jQuery 文档jQuery.ajax

If you need synchronous requests, set this option to false

所以你需要执行你的ajax调用并等到它完全完成根据结果执行你想要的

于 2013-05-14T10:06:46.987 回答
0

UsernameExists你在它运行之前就返回了。

相反，UsernameExists像这样调用：

if (isStepValid) {
    UsernameExist(firstname + ' ' + lastname, function (exists) {
        return exists;
    });
} else {
    return false;
}

这是有效的，因为UsernameExists需要一个回调函数，并且在成功时通过true或false到callback()。

于 2013-05-14T10:06:10.950 回答
0

尝试这样的事情：

// Smart Wizard     
$('#wizard').smartWizard({onFinish: onFinishCallback, onLeaveStep: onNextStep});

function onNextStep() {
    var isValid = validateSteps();
    alert(isValid);
}   

function onFinishCallback(){
    alert('Finish Clicked');
}

function UsernameExist(fullname)
{
    var data = 'user='+ fullname;
    var userAlreadyExists = null;

    if(fullname) {
        $.ajax({
            type: "POST",
            url: "user_check.php",
            data: data,
            async: false,
            beforeSend: function(html) {
                $("#msg_lastname").html('');
            },
            success: function(html){ 
                $("#msg_lastname").show();
                $("#msg_lastname").append(html);

                if(html.search("red") != -1)
                {
                    userAlreadyExists = false;
                }
                else
                {
                    userAlreadyExists = true;
                }
            }
        });
    }

    return userAlreadyExists;
}

function validateSteps(){
    ...
    if (isStepValid) {
        return UsernameExist(firstname + ' ' + lastname);
    } else {
        return false;
    }
}
于 2013-05-14T10:06:24.617 回答
0

也许你应该在 jQuery 加载完成后调用 UsernameExist(fullname, callback) 。

尝试这个 ：

getScript('http://code.jquery.com/jquery-1.9.1.min.js', function () {UsernameExist(fullname, callback)});


function getScript(url, callback) {
var script;
script = document.createElement("script");
script.setAttribute('language', 'javascript');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
var done = false;
vObj = script.onload;
script.onload = script.onreadystatechange = function () {
    if (!done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete")) {
        done = true;
        if (typeof callback === 'function')
            callback(this.ownerDocument.attributes);
    }
};
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);}
于 2013-05-14T10:29:51.143 回答