如何在 WordPress 插件中调用 AJAX？ [复制]

Question

我想通过 AJAX 将 MySQL 表（自定义表）数据提取到我的管理面板。当用户单击按钮时，无需刷新页面即可获取数据。 我已经在 PHP 上创建了它，但是在 WordPress 的哪里添加 AJAX 文件？

这是我的代码。注意我正在尝试制作插件当用户单击 fetchdata 按钮时调用 AJAX 以获得结果。 我在我的插件中添加了 JS 文件

我从主插件文件中调用了 js

function school_register_head()  {
    $siteurl = get_option('siteurl');
    $url2 = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/jquery-1.3.2.js';
    $url3 = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/script.js';

    echo "<script src=$url2 type=text/javascript></script>\n";  
    echo "<script src=$url3 type=text/javascript></script>\n"; 
}
add_action('admin_head', 'school_register_head');

script.js 文件

$(document).ready(function() {
    $("#display").click(function() {          
      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "display.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
            //alert(response);
        }

    });
});
});

display.php 文件

<?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>";
?>

html 按钮

<input type="button" id="display" class="button" value="Fetch All Data" onClick="fetch_data();" />
 <div id="responsecontainer" align="center">

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>";
?>

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