修改

Question

我希望每次点击按钮时对用户进行身份验证。如果用户已注销，并且他们尝试单击按钮，则会将其重定向回家。

然而，validate()之后的代码在用户重定向到主页之前执行。在此示例中，弹出窗口始终在用户被定向回家之前显示。在事件处理程序的其余部分尝试执行之前，如何等待validate()的执行完成？

$("#main-display").on('click', 'button', function (event){
     validate();
     hello = window.open( '', '', "height = 100, width = 100");
     hello.document.write('hello');
});


function validate(){
    $.ajax({
        url: 'validate_user.php',
        dataType: "json",                      
        success: function(response) {            
            if(response.status == 'false') {
                location.href = 'home.php';
            }                
        }       
    });    
}

validate_user.php

<?php
    session_start();
    if(!isset($_SESSION['userId'])){
        session_destroy();
        $response['status'] = 'false';
    }
    else {
        $response['status'] = 'true';
    }
    echo json_encode($response);          
?>

修改

感谢您的回答，但是在用户被引导回来之前，弹出窗口仍会显示，即使是最受欢迎的答案的代码位。

Answer 1

您可以在启动请求后直接在ajax回调中运行代码。以下内容是设置验证函数以获取单个函数参数。在运行AJAX之后调用此函数。

如果他们是有效用户，您甚至可以在第14行使用else来运行代码。

$("#main-display").on('click', 'button', function (event){
     validate(function(){
         //some code here
     });

});


function validate(callback){
    $.ajax({
        url: 'validate_user.php',
        dataType: "json",                      
        success: function(response) {            
            if(response.status == 'false') {
                location.href = 'home.php';
            }
            callback();
        }       
    });    
}

这很灵活，因为它允许在不同的上下文中使用验证。

Answer 2

在success处理程序的末尾使用回调函数：

$("#main-display").on('click', 'button', function (event){
  validate(function() {
        //code to execute after validate AJAX is complete
  });
});


function validate(cb){
  $.ajax({
    url: 'validate_user.php',
    dataType: "json",                      
    success: function(response) {            
        if(response.status == 'false') {
            location.href = 'home.php';
        } 
        cb();               
    }       
  });    
}

这将在AJAX请求完成后执行回调函数，同时不会锁定UI。

Answer 3

使用jQuery的Deferred个对象，这些对象封装在每个jqXHR中。看起来像

function validate(){
    return $.ajax({   // <-- new return statement
        url: 'validate_user.php',
        dataType: "json",                      
        success: function(response) {            
            if(response.status == 'false') {
                location.href = 'home.php';
            }                
        }       
    });    
}

..并在您返回jqXHR后，继续赞：

$("#main-display").on('click', 'button', function (event){
     validate().done(function() {
         // this code gets executed after the request successfully finished
     });
});

这是一种非常好用且非常方便的技术来处理异步过程。您还可以捕获更多案例，例如.fail()以查找任何错误案例。

进一步阅读：

http://api.jquery.com/category/deferred-object/

Answer 4

那是怎么回事：

$("#main-display").on('click', 'button', function (event){
    validate();
});


function validate(){
    $.ajax({
        url: 'validate_user.php',
        dataType: "json",                      
        success: function(response) {            
            if(response.status == 'false') {
                location.href = 'home.php';
            }else{
                //some code here    
            }          
        }       
    });    
 }

Answer 5

您可以使用preventDefault：

$("#main-display").click(function(event) {
    event.preventDefault();
    // do the rest of the code
});

Answer 6

使用同步AJAX请求dude。默认情况下它将是异步。

你可以通过添加一个参数来实现这个目的..

async : false，

如何防止执行事件处理程序？

修改

6 个答案: