如何在 WordPress 中调用 ajax
我的 ajax 调用输出总是显示 0 作为输出不知道为什么
在functions.php
我有这个代码
function get_data() {
$abc = '1';
$result = $wpdb->get_results("SELECT * FROM ".$wpdb->options ." WHERE option_name LIKE '_transient_%'");
echo $result; //returning this value but still shows 0
wp_die();
}
add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );
我的 ajax 调用是在 javascript 中
$('body').on("click", ".re-reset-btn", function(e){
var panel = $('#re-compare-bar');
$.ajax({
type : "GET",
dataType : "json",
url : "/wp-admin/admin-ajax.php",
data : {action: "get_data"},
success: function(response) {
alert("Your vote could not be added");
alert(response);
}
});
$("#re-compare-bar-tabs div").remove();
$('.re-compare-icon-toggle .re-compare-notice').text(0);
});
我在不使用插件的情况下在 wordpress 中进行 ajax 调用,但没有得到我正在传递的内容。即使我输出 $abc 仍然显示 0。
解决方案
在后端有由 WordPress 本身定义的全局 ajaxurl 变量。
这个变量不是由 WP 在前端创建的。 这意味着如果你想在前端使用 AJAX 调用,那么你必须自己定义这样的变量。
这样做的好方法是使用 wp_localize_script。
让我们假设您的 AJAX 调用在 my-ajax-script.js 文件中,然后为这个 JS 文件添加 wp_localize_script,如下所示:
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' );
本地化 JS 文件后,您可以在 JS 文件中使用 my_ajax_object 对象:
jQuery.ajax({
type: "post",
dataType: "json",
url: my_ajax_object.ajax_url,
data: formData,
success: function(msg){
console.log(msg);
}
});
实际上,WordPress 附带了一个方便的功能来访问 admin-ajax。
要求
- 在wp-admin 中你不需要做任何事情,js 库总是被加载
- 在前端,您需要将脚本
wp-util
,如下所示:
add_action('wp_enqueue_scripts',function(){
wp_enqueue_script('wp-util');
wp_enqueue_script('my-script', 'my-script.js', ['wp-util']);
});
JS 库
wp-util 脚本包含可用于发出 ajax 请求的wp.ajax
对象:
wp.ajax.post( action, data ).done( okCallback ).fail( errCallback )
你的例子:
wp.ajax.post( "get_data", {} )
.done(function(response) {
alert("Your vote could not be added");
alert(response);
});
PHP代码
当然,您仍然需要在 PHP 脚本中创建wp_ajax_*
钩子。
add_action( 'wp_ajax_nopriv_get_data', 'my_ajax_handler' );
add_action( 'wp_ajax_get_data', 'my_ajax_handler' );
function my_ajax_handler() {
wp_send_json_success( 'It works' );
}
小费:
对于 Ajax 响应,WordPress 提供了两个功能:
wp_send_json_success( $my_data )
和wp_send_json_error( $my_data )
– 这两个函数都返回一个 JSON 对象并立即终止请求(即,它们exit;
)
使用admin_url('admin-ajax.php');
添加admin-ajax.php admin_url('admin-ajax.php');
<script type="text/javascript">
$('body').on("click", ".re-reset-btn", function(e){
var panel = $('#re-compare-bar');
$.ajax({
type : "POST",
dataType : "json",
url : "<?php echo admin_url('admin-ajax.php'); ?>",
data : {action: "get_data"},
success: function(response) {
alert("Your vote could not be added");
alert(response);
}
});
$("#re-compare-bar-tabs div").remove();
$('.re-compare-icon-toggle .re-compare-notice').text(0);
});
</script>
<form type="post" action="" id="newCustomerForm">
<label for="name">Name:</label>
<input name="name" type="text" />
<label for="email">Email:</label>
<input name="email" type="text" />
<label for="phone">Phone:</label>
<input name="phone" type="text" />
<label for="address">Address:</label>
<input name="address" type="text" />
<input type="hidden" name="action" value="addCustomer"/>
<input type="submit">
</form>
<br/><br/>
<div id="feedback"></div>
<br/><br/>
函数.php
wp_enqueue_script('jquery');
function addCustomer() {
global $wpdb;
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$address = $_POST['address'];
if ( $wpdb->insert( 'customers', array(
'name' => $name,
'email' => $email,
'address' => $address,
'phone' => $phone
) ) === false ) {
echo 'Error';
} else {
echo "Customer '".$name. "' successfully added, row ID is ".$wpdb->insert_id;
}
die();
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');
javascript
<script type="text/javascript">
jQuery('#newCustomerForm').submit(ajaxSubmit);
function ajaxSubmit() {
var newCustomerForm = jQuery(this).serialize();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: newCustomerForm,
success: function(data){
jQuery("#feedback").html(data);
}
});
return false;
}
</script>
我有同样的问题。 我是 WordPress 的新手。 因此,我在这里进行解释,以便每个新学习者都能了解 ajax 是如何在 WordPress 中调用的。
首先,在 wp-content/theme/selected_theme 文件夹下的 function.php 文件中创建一个函数。 在这里, selected_theme 可能是您的主题名称。
在上面的问题中,创建了一个名为get_data()
的函数;
function get_data() {
echo "test";
wp_die(); //die();
}
add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );
在上面两行中,
- add_action 方法用于实现钩子。 在这里,我传递了两个参数,第一个是
wp_ajax_nopriv_get_data
。 在这里,您可以用您的选择替换 get_data。 并且 section 参数是 get_data,它是您要调用的函数名称。 - 在第二个 add_action 中,我传递了两个参数,第一个是
wp_ajax_get_data
。 在这里,您可以用您的选择替换 get_data。 并且 section 参数是 get_data,它是您要调用的函数名称。
这里,wp_ajax_nopriv 在用户未登录时调用,wp_ajax 在用户登录时调用。
jQuery.ajax({
type: "post",
dataType: "json",
url: "/wp-admin/admin-ajax.php", //this is wordpress ajax file which is already avaiable in wordpress
data: {
action:'get_data' //this value is first parameter of add_action,
id: 4
},
success: function(msg){
console.log(msg);
}
});
如果您在响应中得到0
,则表示您的 ajax 调用工作正常。 但是,您还没有在函数 get_data 中将 $wpdb 定义为全局变量。 检查您的错误日志,您一定在那里看到错误。 尝试:
function get_data() {
global $wpdb;
$abc = '1';
$result = $wpdb->get_results("SELECT * FROM ".$wpdb->options ." WHERE option_name LIKE '_transient_%'");
echo $result; //returning this value but still shows 0
wp_die();
}
第 1 步:在函数文件中添加 ajax ‘wp_enqueue_script’ 文件,您必须在其中添加其他 ‘wp_enqueue_script’ 或 ‘wp_enqueue_style’ 文件
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' ) ) );
第 2 步:现在你需要创建函数,在那里你想得到响应,使用 ajax 例如下面
add_action('wp_footer','add_ajaxex_in_footer');
function add_ajaxex_in_footer()
{ ?>
<script type="text/javascript">
jQuery('#***mtbtn').click(function(){
jQuery.ajax({
type:"POST",
url:my_ajax_object.ajax_url,
data: {action:'my_special_ajax_call_enroll_cours'},
success:function(res){
console.log(res);
}
});
});</script><?php
}
第 3 步:现在您必须创建函数,您必须在其中编写查询,
add_action('wp_ajax_my_special_ajax_call_enroll_cours', 'enroll_cours');
add_action('wp_ajax_nopriv_my_special_ajax_call_enroll_cours', 'enroll_cours');
function enroll_cours()
{
echo "Here you van write Query or anything";
}
exit;
}
=> 如果您想在 onClick 按钮后触发 ajax 请求,只需传递按钮 ID
<input type="button" id="***mtbtn" name="Save">
这里如何在普通的 vanilla js 中创建 WordPress 中的 AJAX 调用。
var urlToajax=jsajaxe_S.ajaxurl;
function P_lifg(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
document.getElementById("demo2").innerHTML = urlToajax+ "?action=testfirst";
}
};
xmlhttp.open("GET", urlToajax+ "?action=testfirst", true);
xmlhttp.send(0);
}
这里在functions.php中add_actions:
add_action( 'wp_ajax_testfirst', __NAMESPACE__ .'\FunctionTF' );
add_action( 'wp_ajax_nopriv_testfirst', __NAMESPACE__ .'\FunctionTF');
在上面添加这个函数,现在这个函数:
function FunctionTF(){
exit( "Hola hola" );
}
这里在一些 wp 模板上添加这个 html
<div id="demo"></div>
<div id="demo2"></div>
<button id="spesial_button" onclick="P_lifg()">I am spesial</button>
你可能还喜欢下面这些文章
中访问翻译,例如,您应该使用wp_localize_script函数,正是出于这个原因,它被添加到。/wp-content/plugins/jobhunt-client-translations/jobhunt-client-translat
phpquery_posts(‘showposts=10&orderby=new’);。phpquery_posts(‘showposts=10&orderby=rand’);。></a></li>
例子:-用于使用函数(用于显示页面的主要内容)用于使用函数(用于显示页面的摘录短内容)用下面的代码替换php。只是为了帮助,如果有人想限制帖子长度..然后可以使用下面的代码来做到这一点..下面的代码只是对先生的修改我知道这篇文章有点旧,但我想
//codex.wordpress.org/Function_Reference/wp_head按照https。//codex.wordpress.org/Function_Reference/wp_headwp_head()。
s’));}add_action(‘wp_login’,’user_last_login’);//。get_last_login($userdata->ID);。
//developer.wordpress.org/reference/functions/wp_mkdir_p/。它返回上传目录路径并创建一个文件夹(如果尚不存在)。
bar中添加自定义链接菜单,您可以在主题的functions.php文件中添加代码。以下是一个示例代码,演示如何添加自定义链接菜单:在上述代码中,表示在admin。在这个示例中,我们添加了一个顶级菜单项,其ID为,标题为“自定义链接”,链接为
我正在尝试创建一个这样的菜单:请注意产品下的下拉菜单如何包含图像和链接。是您的菜单项,如果您愿意,您可以使用它根据当前菜单项查询其他内容。将使用您自定义的类和函数,以便您可以修改输出的代码。