Как использовать данные из БД я получаю с PHP в JavaScript?

Я сохранил ссылки на изображения в моей базе данных, ссылки на мой жесткий диск, а не http-ссылки. Мне удалось получить все эти данные с помощью php, и я хочу показать все фотографии, которые связаны в моей карусели JavaScript, но я понятия не имею, как использовать данные, полученные с php в 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

Решение

Во-первых, браузер не будет загружать контент по протоколу file: //, если ваш HTML-документ был загружен по протоколу http (s): //. Причина заключается в безопасности (не уверен, что вы хотите, чтобы какая-либо веб-страница читала содержимое вашего локального диска, верно?).

Когда браузер запрашивает вашу страницу, 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: разработка клиент-сервер может быть немного запутанной для начинающих, потому что обычно они начинаются с локального веб-сервера, а клиент и сервер работают на одном физическом оборудовании. Всегда думайте о клиенте (вашем браузере) и сервере (Apache, Nginx или что вы используете) как о разных компьютерах, подключенных через сеть (даже если они работают на одном компьютере).

3

Другие решения

Вы можете открывать и закрывать теги php, когда пожелаете. Закрытие будет выводить данные, как если бы они были html, а открытые будут выполнять код как php. Примерно так будет заполняться список для вас. В этом случае вам не нужно предоставлять javascript данные php. Вместо этого вам нужно вывести HTML через php.

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

Ниже код может помочь вам.
пожалуйста, укажите имя столбца в переменной $ row.

<?php
while($rows = mysql_fetch_assoc($sql)){
?>
<img class="mySlides" src="images/<?php echo $rows['get_a_column_name'];?>" style="width:100%">
<?php
}
?>
-1
По вопросам рекламы ammmcru@yandex.ru
Adblock
detector