使用ajax查询mysql数据库

ntjbwcob  于 2021-06-20  发布在  Mysql
关注(0)|答案(1)|浏览(396)

我正在使用javascript函数 setInterval 每30秒用ajax检查一次mysql表。使用ajax,它可以用新结果更新页面,而无需重新加载页面。
我想用这个效果 highlight 要给某些记录上色,在下面的示例中,将突出显示id 1和10:

$("#image_li_1").effect("highlight", {}, 25000);
$("#image_li_10").effect("highlight", {}, 25000);

我想强调自上次加载以来添加的所有新记录。
索引.php

// Run polling function every 60 seconds
var myVar = setInterval(myfunction, 30000);

// Load data from check_status page
function myfunction() {
    $.ajax({
        url: "check_status.php", success: function(result2) {
            $("#div2").html(result2);
            $("#title").html("Food Items AUTO Poll");
            $("#image_li_1").effect("highlight", {}, 25000);
            $("#image_li_10").effect("highlight", {}, 25000);
        }
    });
}

检查\u status.php

// Include and create instance of db class
require_once 'DB.class.php';
$db = new DB();

<?php
    // Fetch all items from database
    $data = $db->getRows();
    if (!empty($data)) {
        foreach ($data as $row) {
?>
            <li id="image_li_<?php echo $row['id']; ?>" class="ui-sortable-handle">
                <a href="javascript:void(0);" style="float:none;" class="image_link">
                    <?php echo $row['name']; ?>
                </a>
            </li>
<?php
        }
    }

?>

db.class.php文件

<?php
class DB {
    // Database configuration
    private $dbHost     = "###";
    private $dbUsername = "###";
    private $dbPassword = "###";
    private $dbName     = "###";
    private $itemTbl    = "###";

    function __construct() {
        if (!isset($this->db)) {
            // Connect to the database
            $conn = new mysqli($this->dbHost, $this->dbUsername, $this->dbPassword, $this->dbName);
            if ($conn->connect_error) {
                die("Failed to connect with MySQL: " . $conn->connect_error);
            } else {
                $this->db = $conn;
            }
        }
    }

    // Get rows from data table
    function getRows() {
        $query = $this->db->query("SELECT * FROM ".$this->itemTbl." ORDER BY img_order ASC");
        if ($query->num_rows > 0) {
            while ($row = $query->fetch_assoc()) {
                $result[] = $row;
            }
        } else {
            $result = FALSE;
        }
        return $result;
    }
w8ntj3qf

w8ntj3qf1#

每秒向服务器发送ajax请求
响应json格式的数据,而不是来自服务器控制器的html
如果这是第一个请求,请将其保存到“current”和“previous”变量中
如果这不是第一个请求,请将其保存到“current”变量中
在html页面中显示数据。在此操作期间,比较“当前”和“以前”变量,如果“当前”中有新的内容,则突出显示它
在向服务器发出下一个请求之前,进行赋值:previous=current
利润
尝试搜索和阅读类似“createrestservicephp”的内容。你应该了解这种方法的要点。通常,您的代码应该如下所示:
php.php文件

<?php
$yourDatabaseClass = new YourDatabaseClass("localhost", "username", "password", "database");
$data = $yourDatabaseClass->getTable("select * from table");
echo json_encode($data);

你的js:

var oldData = [];
var currentData = [];
var yourElement = document.getElementById('application');
client.doRequest("php.php").then(function(response){
   currentData = response;
   renderData();
})
function renderData() {
   yourElement.innerHTML = '';
   currentData.forEach(function(item){
       if(isNew(item)) {
          yourElement.apendChild(createHighlightedData(item));
       } else {
          yourElement.apendChild(createOrdinarData(item));
       }
   })
}
function createHighlightedData(item) {
   return ...
}
function createOrdinarData(item) {
   return ...
}

相关问题