javascript - 当新的 mysql 数据进来时点击更新 javascript 数组

Question

我正在使用以下代码将 mysql 数据库内容发送到 javascript 数组中。当我启动页面时这工作正常，但是当数据库获得新条目时，当我重新运行这段代码时新条目不会添加到数组中 - 除非我重新加载整个页面。

<p><button onclick="save_image()">Send image</button></p>

<script type="text/javascript">
function save_image(){
   var userName = 
   <?php 
      $conn = new mysqli(.........."); //connect to database
      $d = mysqli_query($conn, "SELECT name FROM canvas_data" );
      $usernames = array();
      while( $r = mysqli_fetch_assoc($d) ) {
         $usernames[] = $r['name'];
      }
      echo json_encode( $usernames );
   ?>;
   console.log(userName)
}
</script>

我知道还有关于这个主题的其他页面，但我不知道如何将它们应用到我的案例中。如果你有一些想法。谢谢。

Answer 1

如果您想在不重新加载页面的情况下从数据库中获取信息，您需要执行 Ajax 请求来检索信息。

像这样的东西会起作用:

PHP - ajaxendpoint.php

<?php
    $d = mysqli_query($conn, "SELECT name FROM canvas_data" );
    $usernames = array();
    while( $r = mysqli_fetch_assoc($d) ) { 
        $usernames[] = $r['name'];  
    }   
    echo json_encode( $usernames );
?>

JavaScript

function getData() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            console.log(xhttp.responseText);  //log the response from the database
            //if the PHP is returning a JSON object, you can parse that:
            var myArray = JSON.parse(xhttp.responseText);
        }
    }


    xhttp.open("GET", "ajaxendpoint.php", true);
    xhttp.send();
}

HTML - index.html

<button onclick="getData()">
Load Data via Ajax
</button>

这是这个 JS Fiddle 中的另一个 Ajax 请求示例:https://jsfiddle.net/igor_9000/77xynchz/1/