PHP回声通过Ajax不提供样式?

时间:2017-01-30 11:59:40

标签: javascript php jquery html css

已修复。

  1. 使用普通的html,css,js和php创建了一个php页面。

    在该文件的内部,希望用户能够根据所选日期查看事件。

  2. 为了做到这一点,一旦选择了日期,与该日期相关联的值将被发布到php脚本中。

  3. 在php脚本中,发布的变量经历了一些条件并回显了结果。

  4. 然后,这个php脚本的结果将显示在最初的php页面中。

  5. 好的,到目前为止一切顺利。

    事情是, 希望文本显示为样式,这意味着,希望它允许样式类。

    做了一些研究,但似乎找不到那样的问题。

    当您转到该页面并在输入中编写以下内容时:12/22/2016,您可以看到正在显示的数据。问题是, 不会接近风格

    这在某种程度上是有道理的,因为php脚本在任何地方都没有提到使用这些样式。

    样式正在初始的php页面(html / css / js / php)中使用,其中将显示结果。

    最初我认为结果中的样式会被识别,因为它是在提到这些样式文件的完全相同的页面中调用的。

    这是php脚本的结果:

    <div class="tab-pane" role="tabpanel">
    
                          <div 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(/lascruces_styles/img/events-img/event.jpg);">
    
                                        <p class="event-list-start-time">2016-12-22 00:00:00</p>
    
                                        <hr class="event-list-time-divider">
    
                                        <p class="event-list-end-time">2016-12-22 00:00:00</p>
    
                                    </div>
    
                                    <div class="event-list-info col-md-9 col-sm-9">
    
                                        <h2 class="event-list-name">dfgdfgdfg</h2>
    
                                        <p>Organized by <span class="event-list-organizer"><a href="#">yyyyyyy</a></span></p>
    
                                        <p class="event-list-description"><p>dffghfghgfhf</p></p>
    
                                        <a href="#"><button type="button" class="btn more-info-list">More Information</button></a>
    
                                    </div>
    
                                </div> 
    
                            </div> 
    

    这是在php脚本中发布的 javascript代码 ,并在此js代码所在的同一页面的特定div中显示结果,这是php通过此消息一直提到的页面:

        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");
        $.ajax({
          type: "POST",
          url: 'events_script.php',
          data: ({dates: this.value}),
          dataType : 'html',
          success: function(data) {
            $('.results-ajax').html(data);
            alert(data);
          }
      });
    });
      function display(msg) {
        $("<p>").html(msg).appendTo(document.body);
      }
    
    });
    

    PHP:

     $result = mysqli_query($conn, $sql);
        if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            echo '<div class="tab-pane" role="tabpanel">
                          <div 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(/lascruces_styles/img/events-img/event.jpg);">
                                        <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="#">'.$row['Company_Name'].'</a></span></p>
                                        <p class="event-list-description">'.$row['Event_Description'].'</p>
                                        <a href="#"><button type="button" class="btn more-info-list">More Information</button></a>
                                    </div>
                                </div> 
                            </div> 
                        </div>';
            }} else { echo 'No results found.'; }
    

2 个答案:

答案 0 :(得分:0)

尝试在ajax请求中使用数据类型html:

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

答案 1 :(得分:0)

已解决。 这是php脚本的结果:

<div class="tab-pane" role="tabpanel">

                      <div 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(/lascruces_styles/img/events-img/event.jpg);">

                                    <p class="event-list-start-time">2016-12-22 00:00:00</p>

                                    <hr class="event-list-time-divider">

                                    <p class="event-list-end-time">2016-12-22 00:00:00</p>

                                </div>

                                <div class="event-list-info col-md-9 col-sm-9">

                                    <h2 class="event-list-name">dfgdfgdfg</h2>

                                    <p>Organized by <span class="event-list-organizer"><a href="#">yyyyyyy</a></span></p>

                                    <p class="event-list-description"><p>dffghfghgfhf</p></p>

                                    <a href="#"><button type="button" class="btn more-info-list">More Information</button></a>

                                </div>

                            </div> 

                        </div> 

这是 javascript代码 ,它发布在php脚本中,并在该js代码所在的同一页面的特定div中显示结果,该div是php该消息中一直提到该页面:

    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");
    $.ajax({
      type: "POST",
      url: 'events_script.php',
      data: ({dates: this.value}),
      dataType : 'html',
      success: function(data) {
        $('.results-ajax').html(data);
        alert(data);
      }
  });
});
  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

PHP:

 $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        echo '<div class="tab-pane" role="tabpanel">
                      <div 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(/lascruces_styles/img/events-img/event.jpg);">
                                    <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="#">'.$row['Company_Name'].'</a></span></p>
                                    <p class="event-list-description">'.$row['Event_Description'].'</p>
                                    <a href="#"><button type="button" class="btn more-info-list">More Information</button></a>
                                </div>
                            </div> 
                        </div> 
                    </div>';
        }} else { echo 'No results found.'; }