Wp return result from sql using AJAX

I need some help i am making a wordpress plug in. when i try to get some rows from sql thro a AJAX post i will get nothing back. Even if i try just to return a string it will stays empty. I Dont get any error . Thank you so much for helping.

Script:

jQuery(document).ready(function($){
        
        $('.country').change(function(){
              alert("asasasas");
              var country_id = $(this).val();
              alert(country_id);
              $.ajax({
                    cache: false,
                    type: "POST",
                    url: "<?php echo plugin_dir_url('brandstof-ajax.php'); ?>",
                    data: {
                          action : 'my_action',
                          id : country_id,
                          },
                    success: function(data)
                          {
                          alert("sucessss");
                          alert(data);
                          console.log(data);
                          jQuery('.brandstof').html(data);
                          },
                    error: function(errorThrown){
                          alert(errorThrown);
                    } 
                    });
        });

my function:

<?php



add_action('wp_ajax_nopriv_ajax_request', 'my_action');
add_action('wp_ajax_ajax_request', 'my_action');
function my_action() {

$country_id = $_REQUEST['id'];
global $wpdb;
$qbrandstof = $wpdb->get_results("SELECT distinct brandstof FROM autos where jaar='2023'");
foreach($qbrandstof as $brandstof)
{
    ?>
    <option value="<?php echo $brandstof["brandstof"]; ?>"><?php echo $brandstof["brandstof"]; ?></option>
    <?php }
die(); 
}
?>

Answer

You should register and localize your script.

Example: –

function my_enqueue() {
    wp_enqueue_script( 'ajax-script', plugin_dir_url( __FILE__ ) . '/js/my-ajax-script.js', array('jquery') );
    wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

then you can use that javascript object in your script to call the ajax callback function remember to add action in ajax request.

in your case you have used

add_action('wp_ajax_nopriv_ajax_request', 'my_action');
add_action('wp_ajax_ajax_request', 'my_action');.

then action will ‘ajax_request’.

try out this code.

jQuery(document).ready(function($){
        
    $('.country').change(function(){
          alert("asasasas");
          var country_id = $(this).val();
          alert(country_id);
          $.ajax({
                cache: false,
                type: "POST",
                url: my_ajax_object.ajax_url,
                data: {
                        action : 'ajax_request',
                        id : country_id,
                      },
                success: function(data)
                      {
                      alert("sucessss");
                      alert(data);
                      console.log(data);
                      jQuery('.brandstof').html(data);
                      },
                error: function(errorThrown){
                      alert(errorThrown);
                } 
            });
    })
});

Reference :- https://developer.wordpress.org/reference/hooks/wp_ajax_action/