在wordpress中使用ajax更新变量答案

【问题标题】：Update variable with ajax in wordpress在wordpress中使用ajax更新变量
【发布时间】：2016-04-13 07:37:30
【问题描述】：

我在 wordpress 中使用日期过滤器显示事件。当前日期是预先选择的，因此默认情况下会显示当天的事件。如果有人点击另一个日期，我调用函数 newDate。

问题：我用post方法成功传递了新变量，但是不能传递给php。变量采用 unix 时间戳格式。

//calendar.js
function newDate(selectedDate){

var sendDate = selectedDate;
    $.ajax({
        type : 'POST',
        url: ajax_date.ajaxurl,
        data: {  
            action: 'submit_date',
            sendDate : sendDate
            }
     });
}

在我的函数 php 中，我排队、本地化脚本并调用函数

//functions.php   
wp_enqueue_script( 'calendar', get_template_directory_uri() . 
 '/resources/js/calendar.js', array( 'jquery' ), '1.0', true);


wp_localize_script('calendar', 'ajax_date', array(
    'ajaxurl' => admin_url('admin-ajax.php'));

add_action( 'wp_ajax_nopriv_submit_date', 'submit_date' );
add_action( 'wp_ajax_submit_date', 'submit_date' );

function submit_date(){

$newdate = $_POST['sendDate'];
wp_die(); 

};

最后是用于显示事件的 php 文件。 var_dump 打印出 null 并且 echo 也不显示任何内容。

<div id ="events-container">

<?php

  echo $newdate;

  var_dump($newDate);

?>

编辑 - 已修复谢谢，成功了，我的代码如下：

//events-page.php
<div id ="events-container">
<?php
 echo get_events($args);
 ?>
</div>

//calendar.js
$.ajax({
        type : 'POST',
        url: ajax_date.ajaxurl,
        data: {  
            action: 'submit_date',
            sendDate1 : date1,
            sendDate2 : date2
        }
    }).done(function(data) {
              console.log( data ); // will log the data you get back from             your PHP function.
              // Now you can display it on the view
              $('#events-container').html(data);
        })

//functions.php
wp_enqueue_script( 'calendar', get_template_directory_uri() . '/resources/js/calendar.js', array( 'jquery' ), '1.0', true);

wp_localize_script('calendar', 'ajax_date', array(
    'ajaxurl' => admin_url('admin-ajax.php')));


//ajax actions

add_action( 'wp_ajax_nopriv_submit_date', 'submit_date' );
add_action( 'wp_ajax_submit_date', 'submit_date' );

function submit_date(){

$newdate1 = $_POST['sendDate1'];
$newdate2 = $_POST['sendDate2'];

$args = array( 
        'post_type' => 'epsa_events', 
        'posts_per_page' => 5,
        'order' => 'ASC',
        'meta_query' => array  (
            array(
            'key' => 'start_time',
            'value' => array($newdate1, $newdate2),
            'compare' => 'BETWEEN'
            )
        ));
    get_events($args);
    wp_die(); 
    };

function get_events($args){
$loop = new WP_Query( $args ); 
while ( $loop->have_posts() ) : $loop->the_post();

  echo '<div class="entry-content">';
      the_title();
      the_content();
      $startTime = DateTime::createFromFormat('Y-m-d H:i',         get_field('start_time'));
  echo date_format($startTime, 'H:i a d.m.');
  echo '</div>';
endwhile;
}

【问题讨论】：

在 submit_date 函数中发布后，您将在哪里发送您的 ajax 日期？您必须在获取日期后处理日期并在 wp_die() 之前回显内容，然后在 ajax 成功函数中抓取它并显示过滤结果。

标签： javascript php jquery ajax wordpress

【解决方案1】：

您需要对您的 $.ajax() 方法进行回调。现在，您只是将数据发送到您的 PHP 函数，但您不会将其返回到前面。

//calendar.js
function newDate(selectedDate){

var sendDate = selectedDate;
    $.ajax({
        type : 'POST',
        url: ajax_date.ajaxurl,
        data: {  
            action: 'submit_date',
            sendDate : sendDate
            }
  }).done(function(data) {
      console.log( data ); // will log the data you get back from your PHP function.
      // Now you can display it on the view
      $('#events-container').html(data);

  });
}

更多信息：http://api.jquery.com/jquery.ajax/

【讨论】：

【解决方案2】：

您需要在提交日期函数中的 $_POST['sendDate'] 中获取日期后处理 ajax 日期，方法是应用 WP_Query 或插件的任何自定义编写函数，并且您需要在 wp_die() 之前回显处理后的结果，然后您可以在ajax成功函数中获取数据，使用jquery可以插入你的结果。

您可以在此处查看详细指南：

https://www.creare.co.uk/blog/simple-wp_query-ajax

【讨论】：