在Javascript中按顺序执行命令

时间:2011-07-28 08:28:52

标签: php javascript jquery ajax

我很感激有任何建议可以解决这个问题。

我正在使用JS函数checkAvailability()来确认组是否可用于添加到数据库。 (由于某些原因,未应用数据库键约束) 执行此操作时,有时我的函数甚至在从PHP文件接收输出之前返回。

所以我的结果好坏参半。收到PHP文件的输出后,会显示正确的结果。但其余的时间它只会返回错误。

有关如何解决此问题的任何指示? 代码如下:

谢谢, Vish

//检查组名可用性的功能

function checkAvailability(){
        var grpname = $('#groupname').val();
        var isAvailable = false 

        //use ajax to run the check
        $.post("checkGroupName.php", { gname: grpname },
            function(result){
                if(Number(result) == 0){
                    //show that the groupname is available
                    isAvailable = true ;
                    $('#username_availability_result').html(grpname + ' is Available');
                }
                else{
                    //show that the groupname is NOT available
                    isAvailable = false ;
                    $('#username_availability_result').html(grpname + ' is already taken');

                }
        });

    alert("isAvailable : "+isAvailable);
    return isAvailable ;
}  

checkGroupName.php文件

$gname = $_POST['gname'];
$query = "SELECT * FROM groups WHERE group_name='$gname'";
$result = mysql_query($query);
if(mysql_num_rows($result)){        
    echo 1; 
else
    echo 0;

3 个答案:

答案 0 :(得分:4)

在您对PHP页面的ajax请求完成之前,您的函数应始终返回,因为ajax请求是异步。您在您的函数中启动它,但它在网络操作完成后完成。 .post不会阻止等待结果。

您可以使用.ajax而不是.post使用async: false选项阻止它,但是在网络请求期间以令人不愉快的方式锁定UI的许多浏览器。< / p>

相反,让你的函数接受它将使用操作结果调用的回调:

function checkAvailability(callback) {
    var grpname = $('#groupname').val();

    //use ajax to run the check
    $.post("checkGroupName.php", { gname: grpname },
        function(result){
            if(Number(result) == 0){
                //show that the groupname is available
                $('#username_availability_result').html(grpname + ' is Available');
                callback(true);
            }
            else{
                //show that the groupname is NOT available
                $('#username_availability_result').html(grpname + ' is already taken');
                callback(false);
            }
    });
}  

用于执行此操作的代码:

doSomething();
if (checkAvailability()) {
    itsAvailableLetsDoSomething();
    moreAvailableStuff();
}
else {
    itsNotAvailableDoSomethingElse();
    otherStuff();
}

......反而看起来像这样:

doSomething();
checkAvailability(function(available) {
    if (available) {
        itsAvailableLetsDoSomething();
        moreAvailableStuff();
    }
    else {
        itsNotAvailableDoSomethingElse();
        otherStuff();
    }
});

正如您所看到的,影响很小,但通过这样做,您可以利用异步通信来保持UI响应。

答案 1 :(得分:0)

问题是$.post异步发送请求,因此在响应从服务器到达之前执行其余代码。

解决方案是使用$.ajax()并将async选项设置为false,以便调用是同步的。类似的东西:

function checkAvailability(){
        var grpname = $('#groupname').val();
        var isAvailable = false 

        //use ajax to run the check
        $.ajax({
                type: 'post',
                url: 'checkGroupName.php',
                dataType: 'json',
                data:  { gname: grpname },
                async: false, 
                success: function(result){
                  if(Number(result) == 0){
                    //show that the groupname is available
                    isAvailable = true ;
                    $('#username_availability_result').html(grpname + ' is Available');
                }
                else{
                    //show that the groupname is NOT available
                    isAvailable = false ;
                    $('#username_availability_result').html(grpname + ' is already taken');

                }
        });

    alert("isAvailable : "+isAvailable);
    return isAvailable ;
}  

答案 2 :(得分:0)

您可以尝试此代码

function checkAvailability(){

 var grpname = $('#groupname').val();
    var isAvailable = false 
    $.ajax({
        type: "POST",
        url: "checkGroupName.php",
        data: {grpname : grpname },
        success: function (result) { 
        if(Number(result) == 0){
                //show that the groupname is available
                isAvailable = true ;
                $('#username_availability_result').html(grpname + ' is Available');
            }
            else{
                //show that the groupname is NOT available
                isAvailable = false ;
                $('#username_availability_result').html(grpname + ' is already taken');

            }}
    });

}