javascript - 如何在 WordPress 插件中调用 AJAX？

Question

<分区>

Answer 1

如果“将 AJAX 文件放在哪里”表示如何将其包含到管理页面:最简单的方法是使用 admin_enqueue_scripts()，例如，如果您在一个主题:

<?php    
    function load_ajax_script() {
        wp_enqueue_script("ajax-script", get_template_directory() . "/scripts/ajax-script.js");
    }
    add_action("admin_enqueue_scripts", "load_ajax_script");
?>

将此代码添加到事件主题目录中的 functions.php。

下一步是jQuery 脚本。打开与 wp_enqueue_script() 一起使用的 .js 脚本文件并添加以下内容:

jQuery(document).ready(function() {
    jQuery("#fetch-data").click(function() {
        var script_url = "http://www.example.com/wp-content/themes/my-theme/display.php";
        var response_container = jQuery("#responsecontainer");
        jQuery.ajax({
            type: "GET",
            url:script_url,
            success:function(response) {
                response_container.html(response);
            },
            error:function() {
                alert("There was an error while fetching the data.");
            }
        });
    });
});

请注意，调用 .php 文件时必须使用 URL，而不是像使用 PHP 的 include() 时那样使用服务器上的绝对路径。根据放置脚本的位置，使用 $(...) 或 jQuery(...)。

现在我们必须插入调用 AJAX 的按钮，当然还有插入返回内容的容器。因为你没有说它显示在哪里，我现在只是把它放在管理区的顶部:

function display_ajax_button() {
    ?>
    <input type="button" value="Fetch data" id="fetch-data" />
    <div id="fetched-data-content"></div>
<?php
}
add_action("admin_init", "display_ajax_button");

最后，我们创建 PHP 脚本本身。我刚刚复制了您的代码并将其保存在 jQuery.ajax() URL 参数中定义的同一目录中:

<?php
global $wpdb;
$rows = $wpdb->get_results("SELECT postid from `wp_school_post`");
echo "<table class='wp-list-table widefat fixed'>";
echo "<tr><th>ID</th><tr>";
foreach ($rows as $row ){
    echo "<tr>";
    echo "<td>$row->postid</td>";
    echo "</tr>";}
echo "</table>";
?>

这应该是最简单的方法。打开管理页面并试一试。让我知道它是否有效。