ajaxurl not defined on front end
-
26-04-2021 - |
質問
I am trying to create a ajaxform on the front side. I am using the code
jQuery.ajax(
{
type: "post",
dataType: "json",
url: ajaxurl,
data: formData,
success: function(msg){
console.log(msg);
}
});
for which I am getting error
Uncaught ReferenceError: ajaxurl is not definedworklorAjaxBookForm @
?page_id=2:291onclick @ ?page_id=2:202
While using similar code on the admin backend works. What url must I use to process the ajax request?
解決
In backend there is global ajaxurl
variable defined by WordPress itself.
This variable is not created by WP in frontend. It means that if you want to use AJAX calls in frontend, then you have to define such variable by yourself.
Good way to do this is to use wp_localize_script
.
Let's assume your AJAX calls are in my-ajax-script.js
file, then add wp_localize_script for this JS file like so:
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
After localizing your JS file, you can use my_ajax_object
object in your JS file:
jQuery.ajax(
{
type: "post",
dataType: "json",
url: my_ajax_object.ajax_url,
data: formData,
success: function(msg){
console.log(msg);
}
});
他のヒント
to use ajaxurl directly, in your plugin file add this:
add_action('wp_head', 'myplugin_ajaxurl');
function myplugin_ajaxurl() {
echo '<script type="text/javascript">
var ajaxurl = "' . admin_url('admin-ajax.php') . '";
</script>';
}
you can then use the ajaxurl
for ajax request.
i have use below code in wordpress site.
we can use below code for setup ajaxurl like this.
<?php echo esc_url(admin_url('admin-ajax.php')); ?>
i have also added ajax example were we can use above line.
function setNotificationRead() {
fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
},
body: `action=yourFunctionsAction`,
credentials: 'same-origin'
}).then(response => {
return response.json();
}).then(data => {
if (data.status === 'true') {
console.log('Do something...');
}
});
}
The 2021 way is a bit different ;-)
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
wp_add_inline_script( 'ajax-script',
'const myVariables = ' . json_encode(
array(
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
) ),
'before' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
Source: https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-4632