Javascript PHP通过Ajax进行回声处理'；不给风格？

被阻止。

用普通的html、css、js和php创建了一个php页面

在该文件中，希望用户能够看到与所选日期相应的事件

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

在php脚本中，发布的变量经历了一些条件，并响应了结果

然后，这个php脚本的结果将显示在初始php页面中

好的，到目前为止还不错

事情是， 希望文本显示样式化，也就是说，希望它允许设置样式类。

做了一些研究，但似乎没有发现任何类似的问题

例如，当您转到页面并在input:12/22/2016中写入以下内容时，您可以看到显示的数据。问题是，它的与styled没有任何相似之处

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

这些样式将在初始php页面（html/css/js/php）中使用，结果将显示在该页面中

最初我认为结果中的样式会被识别，因为它在提到这些样式文件的同一页面中被调用

我做错了什么？

这是php脚本的结果：

<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>

.hero-content > h1.hero-header-otro {
    font-size: 4rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #ffffff;
}

<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> 

 $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.'; }

---

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

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

---

修好了这是php脚本的结果：

<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>

.hero-content > h1.hero-header-otro {
    font-size: 4rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #ffffff;
}

<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> 

 $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.'; }

2016-12-22 00:00:00

2016-12-22 00:00:00
dfgdfgdfg
组织人

dffghgfhf

这是javascript代码，它在php脚本中发布，并在该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}),
      success: function(data) {
        $('.results-ajax').html(data);
        alert(data);
      }
  });
});
  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

    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);
  }

});

jQuery（函数（$）{
$（“.date”）.datepicker({
onSelect:函数（日期文本）{
显示（“所选日期：+dateText+”；输入的当前值：+this.value）；
$（this.change（）；
}
}).on（“更改”，函数（）{
显示（“从字段获取更改事件”）；
$.ajax({
类型：“POST”，
url:'events_script.php'，
数据：（{dates:this.value}），
数据类型：“html”，
成功：功能（数据）{
$（'.results ajax'）.html（数据）；
警报（数据）；
}
});
});
功能显示（msg）{
$（“”）.html（msg.appendTo（document.body）；
}
});

PHP:

<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>

.hero-content > h1.hero-header-otro {
    font-size: 4rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #ffffff;
}

<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> 

 $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.'; }

$result=mysqli\u查询（$conn，$sql）；
如果（mysqli_num_行（$result）>0）{
while（$row=mysqli\u fetch\u assoc（$result））{
回声'
。$row['start\u Date']

。$row['end_Date']
“.$row['Event_Name']”
组织人

。$row['event_description']
';
}}否则{echo'未找到任何结果。；}

通过保存console.log（）检查您得到的输出是什么；after success function.仅仅因为一个元素有一个特定的类，并不一定意味着有匹配的CSS选择器会影响基于该类的元素的格式。可能是您的选择器只有在这些元素具有特定祖先或一千种其他东西时才以它们为目标。由于目前为止显示的代码片段，我们很难告诉您您做错了什么。@SoniyaReddy没有错误givencss被添加到来自css的消息@cbroe中，父元素是

英雄内容

，但是从ajax您将此内容添加到

结果ajax

，我感到困惑