为什么我的PHP代码不会将json数据返回给我的Ajax调用？

Question

我正在测试使用AJAX登录到Wordpress。但是我的PHP代码没有将数据返回给我的ajax脚本。

我想知道我是否错过了一些东西。

我的模板看起来像这样

// This code is at the top of my template 

function authenticate($username, $password) { 
    global $user; 

    $data = array(); 
    $data['user_login'] = $username; 
    $data['user_password'] = $password; 
    $data['remember'] = false; 

    $user = wp_signon($data, false); 

    if (is_wp_error($user)) { 
     $result = array('login' => false, 'error' => $user->get_error_message()); 
    } 
    if (!is_wp_error($user)) { 
     $result = array('login' => true); 
    } 

    echo json_encode($result); 
} 

if (isset($_REQUEST['user_login'])) { 
    authenticate($_REQUEST['user_login'], $_REQUEST['user_password']); 
} 

(...) // My HTML starts here 

<form name="loginform" action="<?= $_SERVER['REQUEST_URI'] ?>" method="post"> 
(...) 
</form> 

这是我的JS代码

$('.login-button').on('click', function(e){ 
    e.preventDefault(); 

    var $form  = $('form'); 
    var form_action = $form.attr('action'); 
    var form_data = { 
     'user_login': $form.find('.user_login').val(), 
     'user_password': $form.find('.user_psw').val(), 
    }; 

    $.ajax({ 
     type: "POST", 
     url: form_action, 
     data: form_data, 
     dataType : 'json', 
     success: function(result){ 
      cl(result); // <-- This is not outputting anything 
     } 
    }); 
}); 

我可能只是缺少的东西在这里根本，但不知道是什么。

Answer 1

你应该添加AJAX回调的functions.php，而不是一个页面模板。

function so_34356392_ajax_auth() { 
    if (isset($_REQUEST['user_login'])) { 
     authenticate($_REQUEST['user_login'], $_REQUEST['user_password']); 
    } 
} 
add_action('wp_ajax_so_34356392_auth', 'so_34356392_ajax_auth'); 
add_action('wp_ajax_nopriv_so_34356392_auth', 'so_34356392_ajax_auth'); 


function authenticate($username, $password) { 
    global $user; 

    $data = array(); 
    $data['user_login'] = $username; 
    $data['user_password'] = $password; 
    $data['remember'] = false; 

    $user = wp_signon($data, false); 

    if (is_wp_error($user)) { 
     $result = array('login' => false, 'error' => $user->get_error_message()); 
    } 
    if (!is_wp_error($user)) { 
     $result = array('login' => true); 
    } 

    echo json_encode($result); 
    wp_die(); // this is required to terminate immediately and return a proper response 
} 

然后你的AJAX功能将变为：

var form_data = { 
    'action': 'so_34356392_auth', // Target the callback in functions.php 
    'user_login': $form.find('.user_login').val(), 
    'user_password': $form.find('.user_psw').val(), 
}; 

$.ajax({ 
    type: "POST", 
    url: form_action, 
    data: form_data, 
    dataType : 'json', 
    success: function(result){ 
     cl(result); 
    }, 
    error: function() { 
     cl('Cannot retrieve data.'); 
    } 
}); 

了解更多关于在WordPress，in the Codex使用AJAX。

Answer 2

if (isset($_REQUEST['user_login'])) { 
    authenticate($_REQUEST['user_login'], $_REQUEST['user_password']); 
} 

(...) // My HTML starts here 

你输出的JSON，但你也随即输出HTML中。这使得JSON无效。如果你有一个参数，本应该已经被传递给error函数的一个参数发出警告。

只有当您不输出JSON时，才需要输出HTML。

把exit()的if语句中会做的工作（虽然我重构的东西有两个不同的文件来处理不同类型的输出，并包括基于if不同的...或者再前进一步，并使用完整的MVC框架）。

您在输出JSON时也忘记设置header("Content-Type: application/json");。

Answer 3

if (isset($_REQUEST['user_login'])) { 
    // |-- you need an echo 
    echo authenticate($_REQUEST['user_login'], $_REQUEST['user_password']); 
    exit(); 
}