为什么我的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

 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框架）。

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

Answer 2

您应该将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.');
    }
});

在Codex中阅读有关在WordPress中使用AJAX的更多信息。

Answer 3

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