How to send wordpress category as data to ajax?

2 Views

I want to send current category of the page to ajax. I am using WordPress for my blog website. I want to send current page category to infi.php, But I don’t know how to do this.

my ajax

$.ajax({
        type: "POST",
        async: false,
        url: "/infi.php",
        data: {pcount:post_page_count},
        success:
        function(result){
            $("#gizinfi").append(result);
            }
      });
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. To use AJAX properly in WordPress there are a few steps you need to take.

    Firstly, assuming you are registering and enqueueing your javascript file properly (if you aren’t or don’t know what this means you should check out how to enqueue files in WordPress), you need to localise the file. In your functions.php file you can localize a file like so…

    $data_array = array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
);

wp_register_script( 'YourAjaxScript', get_template_directory_uri() . 'js/example.js', array('jquery') );
wp_localize_script( 'YourAjaxScript', 'myAjax', $data_array );

    Now you need some way of accessing the category ID from your javascript. You could simply include an empty span in your template somewhere and store your category_id as a data attribute, then you can find it easily using javascript. You can also add a ‘nonce’ for security reasons, this allows you to check that it is your ajax call that is accessing your PHP, not a randomer. So we’ll add this to your header.php…

    <?php
//For the sake of this we'll only get the first category
$categories = get_the_category();
$cat = ( !empty( $categories ) ? $categories[0]->term_id : false );

//We'll also create a nonce for security
$nonce = wp_create_nonce( 'ajax_nonce' );
?>

<span id="category-id" data-category="<?php echo $cat; ?>" data-nonce="<?php echo $nonce; ?>"></span>

    Now in your example.js file you can create your AJAX function…

    $( document ).ready( function() {

    //Fetch your data variables
    var $cat = $( '#category-id' ).data('category');
    var $nonce = $( '#category-id' ).data('nonce');

    $.ajax({
        type: 'POST',
        url: myAjax.ajaxurl,
        data: {
            action: 'my_ajax_handler', //PHP function to handle AJAX request
            category: cat,
            nonce: $nonce
        },
        success: function( data ) {
            $("#gizinfi").append( data );
        }
    });

});

    Then you need to create a PHP function that handles your AJAX request (could go in your infi.php file as long as you are including that file properly but may be better in your functions.php file). for example…

    /**
 * my_ajax_handler - handles my ajax response and returns some data
 * @return string - my data
 */
function my_ajax_handler() {
    //First we'll validate the nonce and exit if incorrect
    if ( !wp_verify_nonce( $_POST['nonce'], 'ajax_nonce' ) ) { exit; }

    //Here we handle your ajax request and return whatever
    //All our data variables are saved in the $_POST array
    $category = $_POST['category'];
    return $category;
}

add_action("wp_ajax_my_ajax_handler", "my_ajax_handler");
add_action("wp_ajax_nopriv_my_ajax_handler", "my_ajax_handler");

    Those last 2 lines bind the function to your ajax call. And that should be all you need.

    Hope that helps

    Dan