Ajax 和 PHP 调试

Question

构建一个脚本，一旦在 datepicker 日历中选择了一个日期，它就会使用 ajax 在 php 脚本中发布选择的日期；

在该 ajax 调用成功后，它使用另一个 ajax 调用将相同的选定日期发布到另一个 php 脚本并在页面中显示。

做了一些研究，这似乎是我尝试做的最好的解决方案。

脚本如下：

<script> //for the events
    jQuery(function($) {

  $(".date").datepicker({
    onSelect: function(dateText) {
      display("Selected date: " + dateText + "; input's current value: " + this.value);
      $(this).change();
    }
  }).on("change", function() {
    display("Got change event from field");
    // call next ajax function

    var mydate = this.value;
    $.ajax({
        type: "POST",
        url: 'boxes_script.php',
        data: ({dates: mydate}),
            dataType : 'html',
        success: function(data) {
            $('.caixas').html(data);
            alert(data);
            $.ajax({
                type: "POST",
                url: 'events_script.php',
                data: ({dates1: mydate}),
                    dataType : 'html',
                success: function(data) {
                    $('.results-ajax').html(data);
                alert(data);
                }
            });
        }
    });

});
  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
    </script>

这是 atm 使用的代码。由于此处给出的反馈，得到了一些更新，但解决方案仍然没有 100% 有效

这有问题，我认为这是因为第二个 Ajax 调用是在一个成功的 Ajax 中。

问题如下： 数据被发布在 php 脚本中，这些脚本按照它们应该的方式运行。 数组填充了正确的信息。

$('.caixas').html(数据);

工作正常并显示来自“boxes_script.php”的数据。

$('.results-ajax').html(data);

接收 100% 的从“events_script.php”发送的数据，但出于任何奇怪的原因，不会将其附加到页面上。..

我可以看到警报消息中的数据，这是发送到浏览器的正确数据。

为什么不将该数据附加到页面上？

这是 'events_script.php' 的 php 代码：

<?php
include 'config/config.php';
include 'libraries/database.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  print_r($_POST);
  echo $_POST[dates1];

    $dias= $_POST[dates1];
    $mysql_date = date('Y-m-d', strtotime($dias));
    echo $mysql_date;

   //Make database query
   $sql = "***";

    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $image = $row['Company_Logo'];
        $myArray = json_decode($image, true);
        $event=$row['eventID'];
        echo '<div class="tab-pane" role="tabpanel">
                          <div id="'.$dias.'"  class="container day-events">
                                <div class="row event-list">
                                    <div class="event-list-time col-md-3 col-sm-3 center" style="background-image:url('.$myImage = $myArray[0]['name'].');">
                                        <p class="event-list-start-time">'.$row['Start_Date'].'</p>
                                        <hr class="event-list-time-divider">
                                        <p class="event-list-end-time">'.$row['End_Date'].'</p>
                                    </div>
                                    <div class="event-list-info col-md-9 col-sm-9">
                                        <h2 class="event-list-name">'.$row['Event_Name'].'</h2>
                                        <p>Organized by <span class="event-list-organizer"><a href="mini-about.php?$company='.$row['Ref_ID'].'">'.$row['Company_Name'].'</a></span></p>
                                        <p class="event-list-description">'.$row['Event_Description'].'</p>
                                        <a href="mini-single-event.php?event='.$event.'"><button type="button" class="btn more-info-list">More Information</button></a>
                                    </div>
                                </div> 
                            </div> 
                        </div>';
        }} else { echo 'No results found.'; }
}
?>

注意：在错误日志中没有发现错误。网络给出状态 200。

可以在此处看到发送到浏览器的数据：

数据的第一部分被附加到浏览器中，如您在图片中所见。

为什么不能正常工作？

Answer 1

这就是解决问题并得到以下最终结果的原因：

旧：

<div class="row events-tabs">
     <div class="container" data-example-id="togglable-tabs"> 
         <ul class="nav nav-pills center caixas" id="myTabs" role="tablist">
          </ul> 
         <div class="results-ajax tab-content" id="myTabContent">
         </div> 
     </div>
</div>

新功能：

 <div class="row events-tabs">
      <div class="container" data-example-id="togglable-tabs"> 
           <ul class="nav nav-pills center caixas" id="myTabs" role="tablist">
           </ul> 
           <div class="tab-content" id="myTabContent">
                <div class="results-ajax"></div>
           </div> 
      </div>
 </div>

所以，基本上使用 results-ajax 作为自己的 div 的类解决了这个问题。

Answer 2

改变

data1: ({dates1: this.value})

到

data: ({dates1: this.value})

Answer 3

var mydate = this.value; // add before the 1st ajax call

改变-

data1: ({dates1: mydate})