400 Bad Request and ajax path

<?php
/**
Plugin Name: My Script
**/

add_action( 'admin_menu', 'my_script' );

function my_script() {
    $page_title = 'My Script';
    $menu_title = 'My Script';
    $capability = 'manage_options';
    $menu_slug  = 'myscript_viewer';
    $function   = 'my_script_functions';

    add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function );
    add_submenu_page( $menu_slug, $page_title, 'Panel', 'manage_options', 'myscript-panel-submenu-page', 'my_script_panel_page' );
}

function my_script_functions() {
}

function my_script_panel_page() {
    require_once dirname( __FILE__ ) . '/includes/class-myscript-settings.php';
    $page = new Myscript_Settings( plugin_basename( __FILE__ ) );
    ?>
    <div class="wrap">
        <h1><?php esc_html_e( 'My Script Panel', 'myscript-viewer' ); ?></h1>
        <?php $page->display_panel(); ?>
    </div>
    <?php
}

function myscript_load_scripts() {
    wp_enqueue_script( 'myscript', plugin_dir_url( __FILE__ ) . 'js/myscript.js', array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'myscript', 'myscript', array( 'myajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'admin_enqueue_scripts', 'myscript_load_scripts' );

class Myscript_Settings {
    public function __construct( $plugin_basename ) {}
    public function display_panel() {
        ?>
        <div id="run-myscript"><button>Run</button></div>
        <?php
    }
}

// file js/myscript.js
jQuery(document).ready(function($) {
    jQuery("#run-myscript button").click(function(){
        console.log('path ' + myscript.myajaxurl);
        jQuery.post( myscript.myajaxurl, { action: 'my_script_action', status: true, extract: true }, function(response) {
            console.log(response);
        });
    });
});

Here are the changes that I made:

1. The function names were inconsistent with the plugin name. I changed My_script to my_script throughout the code.
2. I changed the class method DisplayPanel() to display_panel(). In PHP, method names should be written in camelCase.
3. The wp_enqueue_script() function was missing a dependency array. I added 'jquery' to the dependencies array to make sure that jQuery is loaded before the myscript script.
4. I added a new parameter '1.0.0' to the wp_enqueue_script() function to specify the version of the script.
5. I added a new action 'my_script_action' to the jQuery.post() function. This will be used to handle the AJAX request.
6. I added a callback function to the jQuery.post() function. This function will be called when the AJAX request is complete. In this case, it simply logs the response to the console.

I added a new action ‘my_script_action’

Correct, absolutely required. Also required is a callback function hooked into the resulting action hooks “wp_ajax_my_script_action” and optionally “wp_ajax_no_priv_my_script_action” if non-logged in users are to have access to the function.

You callback should handle the request, then echo out a response that your jQuery will handle, then it should wp_die(); or otherwise terminate execution.

Thank you both. The missing callback was the problem. I have added it and it seems to be working but I don’t see how to use the data on the page. Here is the code I added”

function my_script_action() {
   $path = __DIR__ . '/myscript.php';
   require $path;    
   wp_die();  //die();
}

add_action( 'wp_ajax_my_script_action', 'my_script_action' );


//ajax file - myscript.php

if (isset($_POST['extract'])) {
    $result = 'hello ajax';
    echo $result;
    exit;

And in my class file I added a div for results

class Myscript_Settings {
    public function __construct( $plugin_basename ) {}
    public function display_panel() {
        ?>
        <div id="run-myscript"><button>Run</button></div>
        <div id="ajax-results"></div>
        <?php
    }
}

If I run the script the callback function displays “hello ajax” in the console but I don’t see how to place that result into the div I added. I know how to populate the div with jquery. Do I need to add more jquery code and pass the result to it from the callback? That seems convoluted. By the way, the fixed code by @zakirbd63 shows a console.log in the post result code but that never displays. That is where I would normally add the jquery code to populate the result div but since that is not being called, I can’t do that. Can someone please explain how to handle the result from the ajax file?

I’m not sure what I did wrong but I deleted it all and re-did it and it is working now. Thanks again for the help. I do appreciate it. ??