使用AJAX生成前端/查看器端页面

时间:2014-07-28 作者:dev3078

我目前正在尝试通过POST方法将插件小部件中的代码中的某些数据发送到主题的存档。php页面。

包含jquery/ajax数据的代码是:

<a class="ajax-post" data-year="\'.$previous ->year .\'" data-month="\'.$previous->month.\'" data-category="\'.$category.\'" href="\' . filter_date_link($category,$previous->year, $previous->month, $day=false) . \'" title="\' . esc_attr( sprintf(__(\'View posts for %1$s %2$s\'), $wp_locale->get_month($previous->month), date(\'Y\', mktime(0, 0 , 0, $previous->month, 1, $previous->year)))) . \'" id="previous_link">&laquo; \' . $wp_locale->get_month_abbrev($wp_locale->get_month($previous->month)) . \'</a></td>\';

$calendar_output .= "\\n\\t\\t".\'<td colspan="3" id="next"><a class="ajax-post" data-year="\'.$next ->year .\'" data-month="\'.$next->month.\'" data-category="\'.$category.\'"href="\' . filter_date_link($category,$next->year, $next->month, $day=false) . \'" title="\' . esc_attr( sprintf(__(\'View posts for %1$s %2$s\'), $wp_locale->get_month($next->month), date(\'Y\', mktime(0, 0 , 0, $next->month, 1, $next->year))) ) . \'" id="next_link">\' . $wp_locale->get_month_abbrev($wp_locale->get_month($next->month)) . \' &raquo;</a></td>\';
js代码是:

jQuery(document).ready(function($){

     $(\'#next_link\').click(function(e){
         e.preventDefault();

         var $aid =$(\'#next_link\'),
         year =$aid.data(\'year\'),
         month =$aid.data(\'month\'),
         category =$aid.data(\'category\');

     });

    $(\'#previous_link\').click(function(e){
         e.preventDefault();

         var $aid =$(\'#previous_link\'),
         year =$aid.data(\'year\'),
         month =$aid.data(\'month\'),
         category =$aid.data(\'category\');

     });

    console.log(\'category: \' + category);

    $.ajax({
         cache: false,
         timeout: 8000,
         type: \'POST\',
         data: {year : year, month: month, category: category},
         url: \'/path/myfile.php\',
         success: function(data) {},
         error: function() {}
    });

});
使用此代码的页面为:

<?php
//Specific class for post listing */
$blog_type = sq_option(\'blog_type\',\'masonry\');
$template_classes = $blog_type . \'-listing\';
if ($blog_type == \'standard\' && sq_option(\'blog_meta_status\', 1) == 1) { $template_classes .= \' with-meta\'; }

add_filter(\'kleo_main_template_classes\', create_function(\'$cls\',\'$cls .=" posts-listing \'.$template_classes.\'"; return $cls;\'));

if(isset($_POST[\'category\'])){

        $category=$_POST[\'category\'];

        $year=$_POST[\'year\'];

        $month=$_POST[\'month\'];

        if(isset($_POST[\'day\'])) {

            $args = array(\'category_name\' => $category , 
            \'date_query\' => array(             
                                  array(
                                    \'year\' => $year,                     
                                    \'month\' => $month,                                           
                                    \'day\' => $day,
                                    ),                                                               
                                    \'column\' => \'post_date\',                          

                                ),
            );
The$args 数组将用于在WP循环中创建新查询。

我对php很有经验,但AJAX和jQuery对我来说有点陌生。

我遗漏了什么?我需要添加/删除什么才能使其工作。

UPDATES:

  • 当使用上面的代码并在调试器中检查控制台时,我得到:加载资源失败:服务器响应状态为404(未找到)
  • 通过使用kaiser建议的解决方案修复了上述问题,但是我现在在jQuery的第29行发现了这个错误:未捕获引用错误:类别未定义
以下是我使用enqueue将脚本附加到插件文件中的代码(不确定位置或方式是否正确):

add_action( \'wp_enqueue_scripts\', \'theme_enqueue_scripts\' );

function theme_enqueue_scripts() {

  // Enqueue and Localize AJAX JavaScript Functions File 
  wp_enqueue_script( \'ajax-categories-js\', plugins_url( \'events-calendar-manager/inc/js/js.js\' ), array(\'jquery\'));

}

1 个回复
最合适的回答,由SO网友:kaiser 整理而成

您指向的是一个不存在的AJAX文件。

$.ajax( {
     // ...
     url : \'/path/myfile.php\',
     // ...
} );
WordPress有一个预定义的文件:

admin_url( \'admin-ajax.php\' )
运行公共查询时,需要将其添加到

wp_localize_script( \'your-script-handle\', \'yourJavaScriptAccessibleObject\', array(
    \'ajaxurl\' => esc_js( admin_url( \'admin-ajax.php\' ) ),
) );
如果您只是在运行面向管理员的调用,那么您甚至可以省去它,只需使用

ajaxurl
在JavaScript文件中作为变量进行预填充。如果只有一个设置,可以使用this hack for Apaches .htaccess file.

请记住,您希望通过使用NONCE保护AJAX调用:

\'_ajax_nonce\' => wp_create_nonce( \'your-script-handle\' ),

结束

相关推荐

如何使用AJAX在单击后运行快捷代码

我有点小问题,需要你的帮助。我的页面上有选项卡,其中一个选项卡上有谷歌地图。默认情况下,此选项卡是隐藏的,当我点击它时,我只能看到一小块地图。映射它是一个已安装插件的短代码。我找到了如何运行ajax请求的解决方案(here) 在单击后加载内容,看起来可以很好地处理简单的html代码,但当我尝试将php代码与短代码放在一起时,它不起作用。我认为这很简单,但我的知识太少,无法编写工作代码:(<script type=\"text/javascript\"> jQuery(document)