I want to add a switch button to a banner , so It can change the style between 2 styles.I need to use Ajax. These styles are already settled from another php file ( a form):

     * Allows you to display the form to choose the style sheet to display
     *
     * @return void
     */
    public function wooster_partner_settings()
    {
?>
        <div class="wrap">
            <h1><?php echo __('Réglages Wooster', 'wooster-partner'); ?></h1>
            <hr class="line">

            <form method="post" action="options.php">
                <?php settings_fields('wooster-settings-group'); ?>
                <?php do_settings_sections('wooster-settings-group'); ?>

                <p class="parag"><?php echo __('Le plugin Compagnon propose deux styles d’affichage :', 'wooster-partner'); ?></p>

                <label for="style_wordpress">
                    <input type="radio" id="style_wordpress" name="wooster_style" value="compagnon-wp.css" <?php checked(get_option('wooster_style'), 'compagnon-wp.css'); ?>>
                    <?php echo __('Style WordPress', 'wooster-partner'); ?>
                </label>

                <label for="style_wooster">
                    <input type="radio" id="style_wooster" name="wooster_style" value="compagnon-wooster.css" <?php checked(get_option('wooster_style'), 'compagnon-wooster.css'); ?>>
                    <?php echo __('Style Wooster', 'wooster-partner'); ?>
                </label><br>

                <input type="submit" class="wooster-button" value="<?php echo __('Enregistrer les modifications', 'wooster-partner') ?>">
            </form>
        </div>
<?php
    } 

This is my banner where I put a icon button switch and I tried to retrieve the option :

if (!class_exists('WoosterBanner')) {
    class WoosterBanner
    {
        public function __construct()
        {
            if (isset($_GET['page']) && in_array($_GET['page'], ['wooster','wooster-followup','wooster-licences','wooster-compagnon','wooster-customers','wooster-partner','wooster-settings','wooster-setup']) && is_admin()) {
                add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
                add_action('in_admin_header', array($this, 'wooster_header_section'));
                add_action('wp_ajax_show_wooster_settings_callback', 'show_wooster_settings_callback');
            }
        }

        public function wooster_header_section() {
            ?>
            <div id="top-bar-banner">
            <div class="wooster-banner">
                <div class="logo">
                    <img src="<?php echo plugins_url('assets/img/logo.avif', __DIR__); ?>" alt="Logo">
                </div>
                <div class="actions">
                    <a href="#" class="button"><i class="fas fa-question-circle"></i></a>
                    <button class="button"
                    data-style="wooster_style"
                    data-postid="<?php echo get_the_ID(); ?>"
                    data-nonce="<?php echo wp_create_nonce('switch_load'); ?>"
                    data-action="switch_load"
                    data-ajaxurl="<?php echo admin_url( 'admin-ajax.php' ); ?>"
            >
                <i class="fas fa-exchange-alt"></i>
            </button>

                    <a href="#" class="button"><i class="fas fa-user"></i></a>
                </div>
            </div>
            </div>
            <?php
        }
// Function to handle AJAX request and display wooster settings
function show_wooster_settings_callback() {
    
    $wooster_style = get_option('wooster_style', 'compagnon-wp.css');
    if (isset($_POST['wooster_style'])) {
        $wooster_style = $_POST['wooster_style'];
        update_option('wooster_style', $wooster_style);
    }

  
    echo json_encode(array('success' => true));
    wp_die();

}


public function enqueue_styles() {
    wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');
    wp_enqueue_script('wooster-banner', plugins_url('assets/js/banner.js', __DIR__), array('jquery'), null, true);
    wp_enqueue_script('jquery');
    wp_localize_script('bannerjs', 'ajaxurl', admin_url('admin-ajax.php'));
}
    }

    new WoosterBanner();
    add_action('wp_ajax_switch_load', 'show_wooster_settings_callback');
    add_action('wp_ajax_nopriv_show_wooster_settings_callback', 'show_wooster_settings_callback');
} 

Then my Js file , I am selecting the button:

    $(document).ready(function() {
        $('.fas.fa-exchange-alt').on('click', function(e) {
            e.preventDefault();

            var data = {
                'action': 'show_wooster_settings_callback',
                'wooster_style': $(this).data('style')
            };

            $.post(ajaxurl, data, function(response) {
                console.log('Style updated successfully');
             

                location.reload();
            }
        );
    }
);
    });
})(jQuery);

I have a post error in my console when i click the button : “load-scripts.php?c=1&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.4.3:2
POST http://wordpressoceane.local/wp-admin/admin-ajax.php 400 (Bad Request)”