AJAX jQuery POST前端返回加载资源失败状态400

时间:2021-01-31 作者:allquiet1984

我为前端题库/测验创建了一个自定义帖子模板,其中有两个元素:

当按下按钮时,显示问题文本的div将触发ajax查询,以从数据库中获取下一个问题

Code in functions.php

//Load ajax object for question bank
add_action(\'wp_enqueue_scripts\', \'my_enqueue\');
function my_enqueue(){
    wp_enqueue_script( "question-refresh", get_stylesheet_directory_uri() . "/js/question-refresh.js", array("jquery") , null, true);
    $question_nonce = wp_create_nonce( \'question\' );
    wp_localize_script(
        \'question-refresh\',
        \'my_ajax_obj\',
        array(
            \'ajax_url\' => admin_url( \'admin-ajax.php\' ),
            \'nonce\' => $question_nonce,
        )
    );
    
}

add_action(\'wp_ajax_nopriv_get_question\', \'get_question_from_database\');
add_action(\'wp_ajax_get_question\', \'get_question_from_database\');

function get_question_from_database(){
    check_ajax_referer( \'question\' ); //Checks nonce
    echo "<script type=\'text/javascript\'>alert(\'SCRIPTS LOADED\');</script>";
    $question_number = rand(1,4);
    $query = "SELECT * FROM `questions`
                WHERE question_number = $question_number";
    $result = $mysqli->query($query) or die($mysqli->error.__LINE__);
    $question = $result->fetch_assoc();
    echo json_encode(array("success" => true, "question-text"=>$question[\'question_text\']));
    exit;
}

The code I have in my custom post template is as following:

<main>
    <div class="container">
        <div>Question 1 of 5</div>
        <p id="question-container">
        </p>
        <button id="next-question" type="button">Next</button>
    </div>
</main>
I have a separate js file stored in my-child-theme/js/question-refresh.js 我想我已经隔离了问题的来源。我显然对jQuery做了一些错误的事情。发布,因为它似乎没有运行。我是jQuery的新手,刚刚学习了其他问题和教程。如果有人能发现我做错了什么,我会非常感激的。非常感谢!

jQuery(document).ready(function($) {
    
    $("#next-question").click( function() {
        console.log("Hello");
        $.post(
            my_ajax_obj.ajax_url, 
            { 
                _ajax_nonce: my_ajax_obj.nonce, 
                "action": "get_question"
                
            }, 
            function(response) {
                console.log("Hello");
                console.log(response);
                $("#question-container").text(response.question-text);
        });
    });
});

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

我发现有两个问题。

首先,你的add_action(\'wp_ajax_nopriv_get_question\',... 代码在模板中,但在将请求发送到时不会加载模板wp-admin/admin-ajax.php, 不会加载模板。回调代码和钩住它的代码需要放入主题的函数中。php文件。

其次,您只钩住了已注销用户的回调(nopriv_). 这意味着当您登录时,该代码将不起作用。您需要为登录和注销的用户挂接:

add_action(\'wp_ajax_get_question\', \'get_question_from_database\');
add_action(\'wp_ajax_nopriv_get_question\', \'get_question_from_database\');

相关推荐

AJAX类别筛选产品默认全部显示

我有按类别列出类别和产品的代码。当我单击时"All" 它列出了所有的产品/products 页面默认情况下未列出所有产品,我需要单击"All" 获取所有产品。默认情况下,当我转到/产品页面时,如何在不单击任何类别或全部链接的情况下获取所有产品?我的functions.phpfunction add_custom_scripts() { wp_enqueue_script( \'ajax_term\', get_stylesheet_directory_uri