Step 1: Run wp_localize_script, add below function in function.php
add_action( 'wp_enqueue_scripts', 'jsto_php_enqueue_scripts', 5 );
public function jsto_php_enqueue_scripts() {
wp_register_script( 'file_handle', plugin_dir_url( __FILE__ ) . 'js/js-file-name.js', array( 'jquery' ), '0.0.1', false );
wp_enqueue_script('file_handle');
// Set Nonce Values so that the ajax calls are secure
$add_something_nonce = wp_create_nonce( "add_something" );
$ajax_url = admin_url( 'admin-ajax.php' );
$user_id = 20; //PHP variable
// pass ajax object to this javascript file
// Add nonce values to this object so that we can access them in the plugin-name-admin.js javascript file
wp_localize_script( 'file_handle', 'ajax_object',
array(
'ajax_url' => $ajax_url,
'add_something_nonce'=> $add_something_nonce,
'user_id' => $user_id
)
);
}
Step 2: Access Localized Variables in your JavaScript File (in our example js-file-name.js)
(function( $ ) {
'use strict';
console.log(ajax_object);
console.log(ajax_object.ajax_url);
console.log(ajax_object.user_id);
console.log(ajax_object.add_something_nonce);
})( jQuery );