child theme - Ajax call returning 0 in page template

admin管理员组

文章数量:1278690

I try to add custom form in my child-theme. I have been read all documentation of this issues but still return 0, this my code

function.php (child-theme)

function my_custom_scripts() {
  wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/assets/js/custom-child.js', array( 'jquery' ),'',true );

  //the_ajax_script will use to print admin-ajaxurl in custom ajax.js
  wp_localize_script('custom-js', 'the_ajax_script', array('ajaxurl' =>admin_url('admin-ajax.php')));
} 

add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
add_action( 'wp_ajax_callbackcity', 'callbackcity' );
add_action( 'wp_ajax_nopriv_callbackcity', 'callbackcity' );

function callbackcity() {
  extract($_POST);

  $data = 'tes city - '.$svalue;
  return $data;
  wp_die();
  //die();
}

custom-child.js

jQuery("#get_city").on("change", function (e) { 
        
        e.preventDefault(); 
        jQuery.ajax({
            type: 'POST',
            dataType: 'json',
            url: the_ajax_script.ajaxurl,
            data: {
                'action': 'callbackcity',
                'svalue': 12
            },
            success: function(data) {
                console.log(data);
            },
            error: function() {
                console.log('ERROR');
            }
        });
    });

can anyone tell me what's wrong with my code?

I try to add custom form in my child-theme. I have been read all documentation of this issues but still return 0, this my code

function.php (child-theme)

function my_custom_scripts() {
  wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/assets/js/custom-child.js', array( 'jquery' ),'',true );

  //the_ajax_script will use to print admin-ajaxurl in custom ajax.js
  wp_localize_script('custom-js', 'the_ajax_script', array('ajaxurl' =>admin_url('admin-ajax.php')));
} 

add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
add_action( 'wp_ajax_callbackcity', 'callbackcity' );
add_action( 'wp_ajax_nopriv_callbackcity', 'callbackcity' );

function callbackcity() {
  extract($_POST);

  $data = 'tes city - '.$svalue;
  return $data;
  wp_die();
  //die();
}

custom-child.js

jQuery("#get_city").on("change", function (e) { 
        
        e.preventDefault(); 
        jQuery.ajax({
            type: 'POST',
            dataType: 'json',
            url: the_ajax_script.ajaxurl,
            data: {
                'action': 'callbackcity',
                'svalue': 12
            },
            success: function(data) {
                console.log(data);
            },
            error: function() {
                console.log('ERROR');
            }
        });
    });

can anyone tell me what's wrong with my code?

• ajax
• child-theme

Share Improve this question asked Sep 27, 2021 at 5:11 raja arabraja arab 1 1

• 1 I would avoid using extract as it's dangerous, is there a rerason you went with the old Admin AJAX api instead of the new/modern REST API? The rest API will tell you in readable text what the problem was, admin-ajax wil just say 0. Additionally, I noticed you chose to use the dataType: 'json', data type to make your request, this is extremely unusual when using admin-ajax.php, and unsupported. To use the JSON data type will require some workarounds. If you used the REST API instead it would be supported out of the box. I also see the code is returning, not exiting, this is not normal – Tom J Nowell ♦ Commented Sep 27, 2021 at 10:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

3 major problems:

• extract, is dangerous and introduces major security issues. It's also completely unnecessary
• return instead of wp_die, you're meant to echo the output and then exit/die. If you do not then WP will continue to handle the AJAX request, assume no handler was found, and print 0
• JSON data type, the old legacy admin-ajax.php wasn't built to use that data type, and requires complicated work arounds for it

Consider using a newer modern REST API handler instead. It will give you human readable messages, works closer to what you expected, has a pretty URL e.g. /wp-json/raja/v1/callbackcity, and supports JSON data type requests.

本文标签： child themeAjax call returning 0 in page template