从MySQL数据库中获取数据到手风琴

时间:2018-10-02 08:22:40

标签: javascript php html accordion

从MySQL数据库中获取数据到html手风琴

我正在从数据库中获取情节,并希望将其放入手风琴中。 因此我尝试并成功获取了数据,但手风琴安装时遇到了问题。

获取后...所有剧集都加载到了“第1季”中。

demo

fetch.php

 paint.setTextAlign(Paint.Align.CENTER);
        int xPos = (newWidth / 2);
        int yPos = (newHeight / 2);
        canvas.drawText("Hello", xPos, yPos, paint);

index.html

<?php
$connect = mysqli_connect("localhost", "root", "", "baba");
$output = '';

$query = "
SELECT * FROM `episodes` WHERE `title_id` = '9851'
";

$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '

 ';

while($row = mysqli_fetch_array($result))
{
   $output .= '
  <!-- video episode item -->
  <div class="related-video-item">
      <div class="thumb">

          <a href="#"><img src="'.$row["poster"].'" alt=""></a>
      </div>
      <a href="#" class="title">'.$row["title"].'</a>
      <a class="channel-name" href="#">Episode '.$row["episode_number"].'<span>
              <i class="fa fa-check-circle"></i></span></a>
  </div>
  <!-- // video episode item -->
  ';

 }
 echo $output;
}
else
{
 echo 'Not Found';
}
?>

1 个答案:

答案 0 :(得分:0)

直接返回sql结果,使用json_encode() 在ID中添加ID,

这就是您将数据加载到特定手风琴的方法。

您需要将value.season_id手风琴更改为数据

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#S1">Season 1</a>
                </h4>
            </div>
            <div id="S1" class="panel-collapse collapse in">
                <div class="panel-body" id="div_season_1">
                </div>
            </div>

        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S2">Season 2</a>
            </h4>
        </div>
        <div id="S2" class="panel-collapse collapse">
            <div class="panel-body" id="div_season_2">
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S3">Season 3</a>
            </h4>
        </div>
        <div id="S3" class="panel-collapse collapse">
            <div class="panel-body" id="div_season_3">

            </div>
        </div>
    </div>

用ajax完成

$.ajax({
    url: "fetch.php",
    method: "POST",
    data: {query: epi},
    success: function (data) {
        $.each($.parseJSON(data), function (key, value) {
            var output = '';
            output = '<div class="related-video-item"> <div class="thumb">' +
                    '<a href="#"><img src="' + value.poster + '" alt=""></a>' +
                    '</div>' +
                    '<a href="#" class="title">' + value.title + '</a>' +
                    '<a class="channel-name" href="#">Episode ' + value.episode_number + '<span>' +
                    '<i class="fa fa-check-circle"></i></span></a>' +
                    '</div>';
            $('#div_season' + value.season_id).append(output);
        })

    }
});

这样,您可以动态地添加到特定的手风琴琴体中

但是我也很想让手风琴变得动感十足,因为你怎么知道你有多少个赛季?,