创建新的div onClick WordPress+AJAX

时间：2014-07-03 作者：Nisham Mahsin

我在worpress页面中有一个链接

<a onclick="show_trend()" >Trend</a>
我正在调用一个ajax函数onclick。

function show_trend() {

    // This does the ajax request
    $.ajax({
        url: ajaxurl,
        data: {
            \'action\':\'render_admin_charts_page\',

        },
        success:function(data) {
            // This outputs the result of the ajax request
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });
}
调用此函数时，我要做的是显示div部分。为此，这是我的职责

function render_admin_charts_page() {
    ?>
    <div class="wrap">
        <div class="em-bookings-events">
            <h2><?php esc_html_e(\'Event Booking Report\',\'dbem\'); ?></h2>        
            <?php em_bookings_events_table(); ?>

        </div>
    </div>
    <?php
}
ajax函数正在调用但未呈现到div

3 个回复
SO网友:TBI Infotech

为Wordpress AJAX添加操作

如果需要为“render\\u admin\\u charts\\u page”请求创建AJAX处理程序，可以创建如下挂钩：

add_action( \'wp_ajax_render_admin_charts_page\', \'yourfunction\' );

function yourfunction() { ?>
    <div class="wrap">
        <div class="em-bookings-events">
            <h2><?php esc_html_e(\'Event Booking Report\',\'dbem\'); ?></h2>        
            <?php em_bookings_events_table(); ?>
        </div>
    </div>
<?php   // Handle request then generate response using WP_Ajax_Response
}
使用上述示例，每当向WordPress发送AJAX请求，并且请求的“action”属性设置为“render\\u admin\\u charts\\u page”时，此挂钩将自动执行。例如，以下代码将执行上述挂钩：

jQuery.post(
    ajaxurl, 
    {
        \'action\': \'render_admin_charts_page\',              
    }, 
    function(response){
        alert(\'The server responded: \' + response);
    }
);

SO网友:TBI Infotech

基本上你想声明这个函数，add_action( \'wp_ajax_render_admin_charts_page\', \'yourfunction\' );, 在另一个文件中？

如果是，那么您可以将这段代码放在函数中。活动主题的php：

add_action( \'wp_ajax_render_admin_charts_page\', \'yourfunction\' );

function yourfunction() { ?>
    <div class="wrap">
        <div class="em-bookings-events">
            <h2><?php esc_html_e(\'Event Booking Report\',\'dbem\'); ?></h2>        
            <?php em_bookings_events_table(); ?>
        </div>
    </div>
<?php   // Handle request then generate response using WP_Ajax_Response
}
如果要将其放置在另一个PHP文件中，则无需为AJAX创建挂钩。只需将代码放在PHP文件中，并将其放在活动主题中，然后使用以下AJAX代码：

jQuery.ajax({
    url: fav_url ,  // path of that file 
    type: \'GET\',        
    timeout: 20000,
    error: function(){
        alert("Error loading user\'s attending event.");
    },
    success: function(html){}
})

SO网友:Ekta Chowdhary

嘿，我正在做同样的事情，但我没有使用wp\\u ajax\\u render，而是使用wp ajax nopriv函数，它对我有用。

结束
标签： jquery   ajax   小码农  

相关推荐

AJAX-调用未定义的函数GET_OPTION()

因此，我最近一直在Wordpress中使用Ajax，并设法从数据库中获取一些股票数据到我的网站中。然而，我现在正试图使用Ajax将Wordpress帖子加载到我的左侧边栏中，这需要使用Wordpress函数，似乎我做得不太好。我已经阅读了Wordpress Codex和其他几个关于这个主题的线程/教程，但是我对自己做错了什么感到非常困惑。Javascript Filefunction load_blog_posts_function() { jQuery.ajax({