How to call ajax url properly on Wordpress?

Question

I have this script:

<script>
(function($){
    load_data();
    function load_data(query)
    {
        jQuery.ajax({
            url:"fetch.php",
            method:"post",
            data:{query:query},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }
    
    $('#search_text').keyup(function(){
        var search = $(this).val();
        if(search != '')
        {
            load_data(search);
        }
        else
        {
            load_data();            
        }
    });
})(jQuery);
</script>

on a php file, but I get constantly an error cause Wordpress doesn't recognize the ajax url (fetch.php) and it tries to generate a new URL in my domain.

How can I do it properly?

Answer 1

You need use wp_ajax or wp_ajax_nopriv action hooks to use WordPress ajax. check the below code.

For call the wp_ajax or wp_ajax_nopriv action hooks you need use WP admin_url('admin-ajax.php') this will return wordperss ajax url.

And, also pass action in jQuery.ajax data params.

Check the below code. code goes in your active theme functions.php file.

function call_ajax(){ ?>
    <script>
        (function($){

            load_data();
            
            $('#search_text').keyup(function(){
                var search = $(this).val();
                if(search != ''){
                    load_data(search);
                }else{
                    load_data();            
                }
            });

            function load_data( query ){
                jQuery.ajax({
                    url:"<?php echo admin_url('admin-ajax.php'); ?>",
                    method:"post",
                    data:{acion:'your_action_name',query:query},
                    success:function( data ) {
                        $('#result').html( data );
                    }
                });
            }

        })(jQuery);
    </script>
<?php }
add_action( 'wp_footer', 'call_ajax', 10, 1 );

add_action( 'wp_ajax_your_action_name', 'your_action_name' );
add_action( 'wp_ajax_nopriv_your_action_name', 'your_action_name' );
function  your_action_name(){
    echo "ajax call";
    echo $_POST['query'];
    die;
}