时间戳

首页 > 解决方案 > WordPress 自定义插件开发中的 AJAX 请求发布/返回

javascript - WordPress 自定义插件开发中的 AJAX 请求发布/返回

问题描述

我正在开发一个自定义 WordPress 插件，我需要 AJAX 在不重新加载页面的情况下点击和篡改数据。为此，我阅读了许多教程，最后以下面的基本插件代码结束。为了详细解释，这里是完整的代码......

插件文件：

<?php
/*
Plugin Name: WP Testing Plugin
Plugin URI: http://www.wordpress.org/WP-Testing-Plugin
Description: A Detailed Description About This Plugin.
Author: Muhammad Hassan
Version: 0.1
Author URI: http://www.wordpress.org
*/

/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {   

echo "      
    <button id='ClickHere'>Click Here To Hit The Ajax</button>
    <div id='showReturnDataHereOnly'>_________</div>

    <script type='text/javascript'>
        jQuery('#ClickHere').click(function(){
            jQuery.ajax({
                type: 'post',
                data: { 
                    'my_plugin_ajax_submit': 'now',
                    'nonce' : '".wp_create_nonce( 'my_plugin_ajax_submit' )."'
                },
                success: function(response) { 
                    jQuery('#ClickHere').text('Ajax Hitted Successfully');
                    jQuery('#showReturnDataHereOnly').html(response);
                },
                error: function(response) { 
                    jQuery('#ClickHere').text('Error! ');
                    jQuery('#showReturnDataHereOnly').html('<div>Error</div>');
                },
            });
        });
    </script>
";

// Get The Ajax Hit And After Validating, Forward It To Another Function
if (isset($_POST['my_plugin_ajax_submit']))
{
    if ( wp_verify_nonce( $_POST['nonce'], 'my_plugin_ajax_submit' ) )
    {
        my_plugin_ajax_submit();   
    }
}

}

// Desired Function To Be Run After Ajax Hit
function my_plugin_ajax_submit() {        
    echo "<b><u><i>Function Hitted.</i></u></b><br/>";
    echo "<b><u><i>Working Fine.</i></u></b><br/>";
    echo "<b><u><i>Data Returned.</i></u></b><br/>";
    // Below Commented Code Is Working Fine After Clicking Upper Button And Getting An Email.
    //wp_mail( 'user@domain.com', 'my_plugin_ajax_submit() fired', time());
    //return true;
}
/*__________________________________________________________________*/


/*____________WP Testing Plugin Option_____________*/
//Adding "WP Testing Plugin" Menu To WordPress -> Tools
function wp_testingPlugin() {
    //  add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function);                  Menu Under Tools
    add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin");
}
add_action('admin_menu', 'wp_testingPlugin');
/*__________________________________________________________________*/
?>

这段代码部分工作正常，所以我想知道其余的错误。当我点击按钮时它工作正常，它会更改按钮文本，但会用整个相同的插件网页填充所需的 div，包括我的函数数据。而我只想用所需的函数数据填充所需的 DIV。这里有什么问题？只需要基本步骤即可在此模式下工作。

注意： 实际上，我想在插件页面中构建一个 HTML 表单，用户将在其中填写表单，然后表单数据将被发送到所需的函数数据，而无需重新加载页面，并将返回该函数输出。

标签： javascriptphpajaxwordpress

解决方案

我尽了最大的努力并得到了工作，但我知道这不是获取数据的最佳方式，因为它正在获取整页然后我们只过滤所需的数据。无论如何，这是更新的代码...

插件文件：

<?php
/*
Plugin Name: WP Testing Plugin
Plugin URI: http://www.wordpress.org/WP-Testing-Plugin
Description: A Detailed Description About This Plugin.
Author: Muhammad Hassan
Version: 0.1
Author URI: http://www.wordpress.org
*/

/*____________WP Testing Plugin Admin/Script_____________*/
function wp_testingPlugin_admin() {   

echo "      
    <button id='ClickHere'>Click Here To Hit The Ajax</button>
    <div id='showReturnDataHereOnly'>_________</div>

    <script type='text/javascript'>
        jQuery('#ClickHere').click(function(){
            jQuery.ajax({
                type: 'post',
                data: { 
                    'my_plugin_ajax_submit': 'now',
                    'nonce' : '".wp_create_nonce( 'my_plugin_ajax_submit' )."'
                },
                success: function(response) { 
                    jQuery('#ClickHere').text('Ajax Hitted Successfully');                        
// Get The Selected DIV Response Only From This Whole Page
jQuery('#showReturnDataHereOnly').html(jQuery('#my_plugin_ajax_submit_data',response).html());
                },
                error: function(response) { 
                    jQuery('#ClickHere').text('Error! ');
                    jQuery('#showReturnDataHereOnly').html('<div>Error</div>');
                },
            });
        });
    </script>
";

// Get The Ajax Hit And After Validating, Forward It To Another Function
if (isset($_POST['my_plugin_ajax_submit']))
{
    if ( wp_verify_nonce( $_POST['nonce'], 'my_plugin_ajax_submit' ) )
    {
        my_plugin_ajax_submit();   
    }
}

}

// Desired Function To Be Run After Ajax Hit
function my_plugin_ajax_submit() {
    echo "<div id='my_plugin_ajax_submit_data'>";       
      echo "<b><u><i>Function Hitted.</i></u></b><br/>";
      echo "<b><u><i>Working Fine.</i></u></b><br/>";
      echo "<b><u><i>Data Returned.</i></u></b><br/>";
    echo '</div>';
    // Below Commented Code Is Working Fine After Clicking Upper Button And Getting An Email.
    //wp_mail( 'user@domain.com', 'my_plugin_ajax_submit() fired', time());
    //return true;
}
/*__________________________________________________________________*/


/*____________WP Testing Plugin Option_____________*/
//Adding "WP Testing Plugin" Menu To WordPress -> Tools
function wp_testingPlugin() {
    //  add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function);                  Menu Under Tools
    add_management_page("WP Testing Plugin By Hassan", "WP Testing Plugin", 'activate_plugins', "WP-Testing-Plugin", "wp_testingPlugin_admin");
}
add_action('admin_menu', 'wp_testingPlugin');
/*__________________________________________________________________*/
?>

我仍在寻找答案，因此如果有人可以更好地帮助我，那么这将选择该答案。我有一个建议，我们可以把我们需要的函数放在另一个文件中，这样我们就可以很容易地在被命中后获取该文件的全部内容？另外，如果你能帮我把 JavaScript 放到另一个文件中，那就更好了。

推荐阅读