How to call ajax url properly on Wordpress? - php

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;
}