Settings API form – submit with AJAX

I just tested your code, I guess the ajaxurl in your javascript is wrong, it must be:

<?php echo admin_url( 'options.php' ); ?>

This is the code I have tested.

class TestAjaxSettingsAPI {
    public function __construct() {
        add_action( 'admin_menu', array( $this, 'agy_admin_menu' ) );
        add_action( 'admin_init', array( $this, 'agy_register_settings') );
    }

    public function agy_admin_menu() {
        add_menu_page( 'Agy menu', 'Agy menu', 'manage_options', 'agy-menu', array( $this, 'agy_dashboard_page' ), '', 99 );
    }

    public function agy_dashboard_page() {
        ?>
        <form id="agy-form-submit" action="options.php" method="post">
    
            <?php
            settings_errors( 'agy_settings_fields' );
            wp_nonce_field( 'agy_dashboard_save', 'agy_form_save_name' ); // CHECK THIS AT THE END
            settings_fields( 'agy_settings_fields' );
            ?>
    
            <div id="agy-tab1" class="agy-tabcontent">
                <?php do_settings_sections( 'agy_settings_section_tab1' ); ?>
            </div>
    
            <?php
            submit_button(
                __( 'Save Changes', 'agy' ),
                '',
                'agy_save_changes_btn',
                true,
                array( 'id' => 'agy-save-changes-btn' )
            );
    
            if ( wp_doing_ajax() ) {
                wp_die();
            }
            ?>
    
        </form>

        <script>
            function agyAjaxSubmit() {
                var agyFormData = new FormData(this);

                agyFormData.append('agy_save_changes_btn', 1);
                // agyFormData.append('security', agy_public_ajax.agy_publisher_name);

                jQuery.ajax({
                    type: 'POST',
                    url: '<?php echo admin_url( 'options.php' ); ?>',
                    data: agyFormData,
                    processData: false,
                    contentType: false,
                    success: function () {
                        console.log('work');
                    },
                    error: function () {
                        console.log('not work');
                    }
                });

                return false;
            }

            jQuery('#agy-form-submit').submit(agyAjaxSubmit);
        </script>
    
        <?php
        if ( ! isset( $_POST['agy_form_save_name'] ) ||
             ! wp_verify_nonce( $_POST['agy_form_save_name'], 'agy_dashboard_save' ) ) {
            return;
        }
        ?>
       
        <?php
    }

    public function agy_settings_section_callback() {}

    public function agy_section_id_enabled_disabled() {
        // get the value of the setting we've registered with register_setting()
        $setting = get_option('agy_settings_fields');
        // output the field
        ?>
        <input type="text" name="agy_settings_fields" value="<?php echo isset( $setting ) ? esc_attr( $setting ) : ''; ?>">
        <?php
    }

    public function agy_register_settings() {

        register_setting( 'agy_settings_fields', 'agy_settings_fields' );
    
        // Adding sections
        add_settings_section( 'agy_section_id', __( 'General', 'agy' ), array(
            $this,
            'agy_settings_section_callback'
        ), 'agy_settings_section_tab1' );
    
        add_settings_field( 'agy_section_id_enabled_disabled', __( 'Enable / Disable', 'agy' ), array(
            $this,
            'agy_section_id_enabled_disabled'
        ), 'agy_settings_section_tab1', 'agy_section_id' );
    }
}

new TestAjaxSettingsAPI();

tech