Question

我很难学习AJAX的基础知识，因为我设法找到了复杂的例子。事实上，我想做一件显而易见的事情，但我找不到任何简单的解决方案。有很多说明如何使用AJAX来检查各种形式等。但是这些技术在WordPress中的工作原理很少。

官方指示对我来说也没用： https://codex.wordpress.org/AJAX_in_Plugins

我究竟需要什么？

例如，我在functions.php中有一些功能。让它成为一个简单的字符串：

<?php 

function do_echo() {

echo "Hello";

}

现在，我想在帖子中创建一个按钮，并使用AJAX调用do_echo（）。

<button class="my_button" type="button" role="button">Click Me</button>

所以，我要做的首要事情就是按下按钮，然后得到＃34; Hello，world！＆＃34;显示。

当然，事实上，我需要执行更复杂的功能。但是，首先，我需要做这些简单的事情。

我意识到我需要使用jQuery做这样的事情

$.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, 
or html)',
data: {param1: 'value1'},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});

我明白我需要在PHP中做这样的事情

add_action('wp_ajax_(action)', 'my_action_callback');
add_action('wp_ajax_nopriv_(action)', 'my_action_callback');

但我无法理解将这些内容附加到WordPress需要采取的具体步骤。

任何人都可以帮助我使用简单说明如何在单击按钮时使用AJAX从 WordPress 中的functions.php调用任何PHP函数？

提前谢谢你。

Answer 1

好的，让我们为此写一个简化的例子。

以下是functions.php的示例：

add_action('wp_ajax_nopriv_sayhello', 'say_hello_function');
add_action('wp_ajax_sayhello', 'say_hello_function');
function say_hello_function(){
echo 'hello';
exit();
}

这是前端部分：

<button class="my_button" type="button" role="button">Click Me</button>

<script>
jQuery(".my_button").click(function(){

jQuery.get(ajaxurl,{'action': 'sayhello'}, 
function (msg) { alert(msg);});

});

</script>

UPD：

要在您的网站内容中显示返回的数据：

   <script>
    jQuery(".my_button").click(function(){  
    jQuery.get(ajaxurl,{'action': 'sayhello'}, 
    function (msg) { jQuery(".result_area").html(msg);});
    });
   </script>

要使上面的代码正常工作，你需要一个带有“result_area”类的div。

<div class="result_area"></div>

Answer 2

最好的实践是使用WP Rest API

Wordpress提供了一种简单有条理的方式来添加返回JSON的API路由。

您可以在function.php或其他已加载文件中注册路线。

将加载主要WP文件，您可以使用您的功能。

WP示例：

<?php
/**
 * Grab latest post title by an author!
 */
function my_awesome_func( $data ) {
  $posts = get_posts( array(
    "author" => $data["id"],
  ) );

  if ( empty( $posts ) ) {
    return null;
  }

  return $posts[0]->post_title;
}

add_action( "rest_api_init", function () {
  register_rest_route( "myplugin/v1", "/author/(?P<id>\d+)", array(
    "methods" => "GET",
    "callback" => "my_awesome_func",
  ) );
} );

通过AJAX调用任何Wordpress PHP函数

2 个答案: