Question

您好我使用jquery构建了一个手动滑块，并且我将我的图像＆＃39;数组中的位置，但现在我想从数据库加载图像，我想将它们循环到一个javascript数组。这怎么可能完成？

＆＃13;

<?php
$get = $connect->query("SELECT imagem FROM slider ORDER by id");

while($fetch = $get->fetch_array(MYSQLI_ASSOC)){

}
?>

<script>
    var items = ["url(images/banner_1.jpg)","blue","black","green"];
</script>

＆＃13;

Answer 1

这是一个简单/低档的方法。它没有你提到的任何外部依赖关系。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Use PHP in JavaScript</title>
</head>
<body>

  <?php
    // assuming your database call returns a valid array like this
    $things = array("banner_1.jpg", "banner_2.jpg", "banner_3.jpg", "banner_4.jpg");
    // the built-in `json_encode` will make JavaScript like it
    $things_json = json_encode($things);
  ?>

  <div class="etc">
    <!--this is were the database items will go-->
    <ul id="things"></ul>
  </div>

  <script>
    // echo out json-ified PHP directly into the script tag
    var things = <?php echo $things_json ?>;
    // loop through the json and append list items to our target element
    for(var i = 0; i < things.length; i++) {
        document.querySelector('body').innerHTML += '<li>'  + things[i] + '</li>';
    }
  </script>

</body>
</html>

这里的主要技巧是：

使用内置于php

json_encode($your_array_here)

echo json直接进入正文中的脚本标记。

您甚至可以使用外部脚本中的新things变量，假设您将其保留在global scope中，并让您的外部js在DOMContentLoaded上运行或类似。

以下是代码工作的一些图片：

请注意，json_encode()一次只能接受一个变量。如果需要将多个变量传递到脚本中，可以在php中使用array functions构建一个数组（map），或者仅在每个变量json_encode()中构建一个数组（map），并在script标记内进行多个echo调用。

<?php
    // assuming your database call returns a valid array like this
    $things = array("banner_1.jpg", "banner_2.jpg", "banner_3.jpg", "banner_4.jpg");
    $more_things = array("banner_5.jpg", "banner_6.jpg");
    $both_things = array_merge($things, $more_things);
    $both_things_json = json_encode($both_things);
  ?>


  <script>
    // echo out json-ified PHP directly into the script tag
    var bothThings = <?php echo $both_things_json ?>;
  </script>

Answer 2

一种更简单的方法，，无需在DOM中添加内容，并且因为您要求使用javascript数组：

您必须始终记住PHP稍后在浏览器中执行服务器和javascript。所以你可以使用你的php创建（有效）javascript，如下所示：

export const markChallengeAsCompleted = challengeId => {
  axios
    .post(`/challenges/${challengeId}`, { completed: true })
    .then(res => console.log(res.data))
    .catch(err => console.log(err.response.data));
};

php脚本的输出（将由javascript执行的代码）将是这样的：

<?php
echo '<script>var jsArray = [];';

while($fetch = $get->fetch_array(MYSQLI_ASSOC)){ // I took your line exactly as you wrote it
    echo 'jsArray.push("'. $fetch['field']  .'");'; //you change 'field' with whatever you need
}

echo '</script>';
?>

之后，您将能够访问jsArray。

PHP循环值到javascript数组

2 个答案: