如何使用db中的数据我在javascript中使用php获取?

时间:2017-08-14 11:37:41

标签: javascript php

我已经存储了数据库中图像的链接,链接到我的硬盘而不是http类链接。我设法使用php获取所有数据,我想显示在我的JavaScript轮播中链接的所有照片,但我不知道如何使用我在JavaScript中使用php获得的数据。我使用代码获取数据:

mysql_connect("localhost","root","");
    mysql_select_db("TEMP");
    $sql = mysql_query("SELECT * FROM tv ORDER BY id ASC");

    $id = 'id';

    $path = 'path';

    while($rows = mysql_fetch_assoc($sql)){
        echo 'Adresas: ' . $rows[$path] . '</br>';
    }

我有一个看起来像这样的JavaScript轮播:

<div class="w3-content w3-section" style="max-width:500px">
  <img class="mySlides" src="images/Chrysanthemum.jpg" style="width:100%">
  <img class="mySlides" src="images/Desert.jpg" style="width:100%">
  <img class="mySlides" src="images/Hydrangeas.jpg" style="width:100%">
  <img class="mySlides" src="images/Jellyfish.jpg" style="width:100%">
  <img class="mySlides" src="images/Koala.jpg" style="width:100%">
</div>


<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000); // Change image every 2 seconds
}
</script>

正如您所看到的,它使用来自div的硬编码图像,而不是我想使用从我的数据库中获得的链接。我该怎么做?

3 个答案:

答案 0 :(得分:3)

如果您的HTML文档已通过http(s)://协议加载,首先浏览器不会通过file://协议加载任何内容。原因是sequrity(不确定你是否想让任何网页读取你的本地磁盘内容,对吧?)。

当浏览器请求您的页面时,PHP正在服务器端执行,并生成浏览器获取的内容作为响应。此内容也可能包含javascript,并在收到响应时在浏览器中执行。我很常见,你需要的最简单的PHP页面可能如下所示:

<?php
    // we'll store the list here
    $urls = [];

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Execute the query
    $result = $conn->query("SELECT path FROM tv ORDER BY id ASC");
    // Fetch all selected rows one by one
    while($row = $result->fetch_assoc()) {
        $urls[] = $row["path"];    
    }
    $conn->close();
?>
<div class="w3-content w3-section" style="max-width:500px">
    <?php foreach ($urls as $url): ?>
        <img class="mySlides" src="<?=$url?>" style="width:100%">
    <?php endforeach; ?>
</div>

请注意,此示例非常简单。它说明了答案,但它包含一些不好的做法,例如将HTML内容与服务器端逻辑等混合......

UPD:对于初学者来说,客户端 - 服务器开发可能有点令人困惑,因为通常它们从本地Web服务器开始,而客户端和服务器都在相同的物理硬件上运行。始终将客户端(您的浏览器)和服务器(Apache,Nginx或您使用的任何服务器)视为通过网络连接的不同计算机(即使它们在一台计算机上运行)。

答案 1 :(得分:0)

您可以根据需要打开和关闭php标签。 Closing将输出数据,就好像它是html并打开将执行代码作为php。这样的东西会为你填充清单。在这种情况下,您不需要给javascript php数据。相反,你需要通过php输出html。

<div class="w3-content w3-section" style="max-width:500px">
<?php
    $rows = getRowsFromDB();
    foreach($rows as $row)
    {
        ?><img class="mySlides" src="<?php echo $row[$path];?>" style="width:100%"><?php
    }
?>
</div>

答案 2 :(得分:-1)

下面的代码可能会对您有所帮助。 请把你的列名放在$ row变量中。

<?php
while($rows = mysql_fetch_assoc($sql)){
?>
<img class="mySlides" src="images/<?php echo $rows['get_a_column_name'];?>" style="width:100%">
<?php
}
?>