wordpress ajax bad request 400

Question

Where is my mistake? html code

<div class="star-rating">
<span class="postid" post-id="52"></span>
<span class="score-bg"></span>
<div class="scores">
    <?php for ($i = 1; $i <= 5; $i++): ?>
        <div class="score" data-score="<?php echo $i; ?>">
            <span class="scoreAbsolute"></span>
        </div>
    <?php endfor; ?>
</div>

jQuery(document).ready(function ($) {
$(function () {
    $(".score").click(function () {
        var score = $(this).attr('data-score');
        var post = $('.postid').attr('post-id');
        $.ajax({
            url: post_score.ajaxscript,
            method: 'POST',
            data: {
                'action': 'submit_score',
                'postid': post,
                'postScore': score,
            },
            success: function (data) {
                console.log(data);
            }, error: function (errorThrown) {
                alert('nok');
            }
        });
    });
});

});

php code

    add_action('wp_ajax_submit_score', 'submit_score');
    add_action('wp_ajax_nopriv_submit_score', 'submit_score');
    
    function submit_score()
    {
        if (isset($_POST['action'])) {
    //something
        }
        wp_die();
    }

Answer 1

Does you have localized your script correctly? Please try the following method to enqueue your custom script and localize it.

add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 10 );
function my_custom_scripts() {
    wp_enqueue_script('custom-script',plugin_dir_url(__FILE__) . '/custom_script.js',
        array( 'jquery' )
    );
    wp_localize_script( 'custom-script', 'ajaxscript',array( 'ajaxurl' => admin_url('admin-ajax.php' )));
}

Then you can call ajax url in custom_script.js as this way.

        $.ajax({
            url: ajaxscript.ajaxurl,
            method: 'POST',
            ....
        });

Answer 2

your onclick class is not in the HTML. you are calling $(".post-score").click when in your HTML file the class name is .score

in your PHP code you want to handle the REQUEST. you dont have to check if the action is posted because wordpress is handling that for you by calling the correct function.

so your JS should be defined like this:

data: {
    'action': 'submit_score',
    postid: post,
    ticketScore: score,
},

and in your PHP:

add_action('wp_ajax_submit_score', 'submit_score');
add_action('wp_ajax_nopriv_submit_score', 'submit_score');
    
function submit_score(){
    $safe_postID = intval( $_REQUEST['postid'] );
    if ( ! $safe_postID ) {
        $safe_postID = '';
    }
    
    $safe_ticketScore = intval( $_REQUEST['ticketScore'] );
    if ( ! $safe_ticketScore ) {
        $safe_ticketScore = '';
    }
    
    if($safe_postID && $safe_ticketScore ){
        // RUN YOUR CODE AND OUTPUT YOUR SUCCESS
        wp_send_json_success( array( 'postID' => $safe_postID, 'ticketScore' => $safe_ticketScore ) );
    }
    
    wp_send_json_error();
    wp_die();
}