Why does AJAX json script return extra 0 (zero)

Question

I have an AJAX function in WordPress that calls a PHP function to return the value of a transient record in the Database.

When I call the function using jQuery, I receive the result however it always has an extra 0 (zero) appended to the value.

Here is my jQuery function:

(function($) {
    $(document).ready( function() {

        var AdvancedDashboardWidget = function(element, options)
        {
            var ele = $(element);
            var settings = $.extend({
                action: '',
                service: '',
                countof: '',
                query:   '',
                callback:''
            }, options || {});
            this.count=0;
            var url='';
            switch(settings.service)
            {
                case 'facebook':
                    if(settings.countof=='likes' || settings.countof=='talks')
                    {
                        ajaxCall(action,ele,settings);  
                    }
            }
        };

    var ajaxCall = function(action,ele,settings){
        opts = {
            url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
            type: 'POST',
            async: true,
            cache: false,
            dataType: 'json',
            data:{
                action: settings.action // Tell WordPress how to handle this ajax request
            },
            success:function(response) {
                //alert(response);
                ele.html(response);
                return; 
            },
            error: function(xhr,textStatus,e) {  // This can be expanded to provide more information
                alert(e);
                //alert('There was an error');
                return; 
            }
        };
        $.ajax(opts);
    };


        $.fn.advanceddashboardwidget = function(options)
        {
            return this.each(function()
            {
                var element = $(this);

                // Return early if this element already has a plugin instance
                if (element.data('advanceddashboardwidget')) return;

                // pass options to plugin constructor
                var advanceddashboardwidget = new AdvancedDashboardWidget(this, options);

                // Store plugin object in this element's data
                element.data('advanceddashboardwidget', advanceddashboardwidget);
            });
        };

    });
})(jQuery);

There are more helper functions involved however this is the main jQuery function that communicates with WordPress and returns the value of the PHP function.

The issue is that if the value is returned as "99" for example it will be returned as "990"

Here is the PHP function that jQuery is calling:

/**
* Get Facebook Likes
*/

public function get_facebook_likes(){

    echo 99;
}

If I change the above to return 99; I receive plain 0

Answer 1

Your function should use wp_send_json to encode the PHP as JSON and sent it back to the AJAX request handler. This will also stop executing of any following PHP too, so there is no need to use exit or die.

So for your specific example, you would use:

/**
* Get Facebook Likes
*/

public function get_facebook_likes(){
   wp_send_json(99);
}

Answer 2

This is old question but I'm going to answer this. wp_send_json() function may help but not always. There could be some moments when you can't use this function. Like, when you load posts by ajax, you are getting some template part, you can use the function. That's why WordPress documentation suggests to make use of the die() function.

So in the end, your php function should look like this:

/**
* Get Facebook Likes
*/

public function get_facebook_likes() {
   echo 99;
   die();
}