Как заполнить & lt; div & gt; элементы с элементами массива из функции PHP, используя JavaScript?
У меня есть функция php, которая возвращает мне массив некоторых RSS-данных, я хотел бы объединить PHP с javascript. Итак, я сделал следующие шаги:
1 — вернуть массив из функции PHP;
2- Использование foreach перебирать каждый элемент возвращаемого массива;
3- используйте JavaScript для создания <div> элементы и заполнить каждый из них данными из массива и добавить динамический эффект.
Вот мой код:
<script>
<?php
header("Content-Type: text/javascript; charset=utf-8");
foreach(getFeed() as $article){
?>
setInterval(function() {
createDiv();
},5000);function createDiv() {
document.getElementById("test").appendChild(document.createElement("DIV"));
$("#test").append('<div ><h4 id="title"><?php echo $article["title"]; ?></h4><p id="content"><?php echo $article["description"]; ?></p>');
}
<?php
}
?>
</script>
<div id= "test">
</div>
Проблема в том, что я получаю n дублированных элементов (n — длина массива):
Элемент 1
Элемент 1
Элемент 1
…
Тем не менее, это не то, что я хочу, желаемый результат, который я хочу вернуть все элементы в массиве:
Элемент 1
Элемент 2
Элемент 3
…
Итак, как я могу решить эту проблему?
Решение
первый. прекрати смешивать разные языки, пожалуйста 🙂 это ужасно и плохо. отделить их. если это один файл, используйте скрытые HTML-теги, чтобы скрыть их.
<?php
echo '<input id="hiddenField" type="hidden" value="'.json.encode(getFeed()).'">';
?>
<script type="text/javascript">
var myArrayAsString = $('#hiddenField').val();
var myArray = JSON.parse(myArrayAsString);
// [{artNo: 1}, {artNo: 2}, ...]
// now you can do what ever you want with a result array in javascript
</script>
Другие решения
Первое расчесывание языков сценариев часто является головной болью
Я рекомендую вам использовать вызов на стороне php serer, который возвращает ваш объект один (предпочтительно в json), а затем вызывать этот сервис в вашем javascript, таким образом, у вас есть хорошее разделение проблем.
Также, глядя на код, который я вижу, вы воссоздаете свой метод createDiv каждый раз, когда выполняете цикл, так что вы получаете несколько экземпляров этой функции, поэтому, когда ваш setiInterval запускается, он просто продолжает подбирать первый созданный вами метод createDiv и, таким образом, продолжает запускать его. это оставляет вас с несколькими экземплярами этого первого div.
редактировать для кода JavaScript
for (var article in feed) {\n
$("#test").append('<div class="post-id-' + article.id + '"><h4 id="title">' + article.title + '</h4><p id="content">' + article.description + '</p>');
}
Проверь это.
<script>
<?php
foreach(getFeed() as $article){
?>
setInterval(function() {
$("#test").append('<div class="post-id-<?php echo $article["id"] ?>"><h4 id="title"><?php echo $article["title"]; ?></h4><p id="content"><?php echo $article["description"]; ?></p>');
}, 5000);
<?php
}
?>
</script>
<div id= "test">
</div>
detector