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小提琴中的另一个Ajax请求示例：https://jsfiddle.net/igor_9000/77xynchz/1/

当新的mysql数据进入时，单击更新javascript数组

1 个答案: