layui是一款非常受歡迎的前端框架,它為web開發提供了豐富的組件和界面元素。但是當我們需要對服務器上的數據進行查詢時,需要使用一些后端語言與數據庫進行交互。PHP是一門非常流行的后端編程語言,本篇文章將介紹如何使用layui查詢PHP。
為了說明這個過程,我們先來創建一個簡單的數據庫,里面有一張叫做“users”的表,其中有三個字段,分別是id、name和email。我們將使用PHP來查詢這張表。
<?php
//連接數據庫
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 創建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢測連接
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 查詢數據
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 輸出每行數據
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 結果";
}
$conn->close();
?>
上述代碼中,我們首先使用mysqli對象連接了數據庫,然后通過$query方法執行了一條查詢命令。在獲取到查詢結果后,我們使用fetch_assoc方法逐行讀取并輸出查詢結果。
接下來我們使用layui來查詢PHP的結果,在這里我們使用了一個table組件和一個form組件。table組件用于展示查詢結果,而form組件則用于提交查詢表單。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layui 查詢 PHP 數據庫</title>
<link rel="stylesheet" >
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">ID</label>
<div class="layui-input-block">
<input type="text" name="id" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="query">查詢</button>
</div>
</form>
</div>
<div class="layui-col-md6">
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>zhangsan@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
// 通過表單提交數據
layui.use(['form', 'table'], function(){
var form = layui.form;
var table = layui.table;
// 監聽表單提交事件
form.on('submit(query)', function(data){
// 發送ajax請求并更新表格數據
table.reload('example', {
url: 'query.php',
where: data.field
});
return false;
});
// 渲染表格
table.render({
elem: '#example',
url: 'query.php',
page: true,
cols: [
[
{field:'id', title: 'ID'},
{field:'name', title: 'Name'},
{field:'email', title: 'Email'}
]
]
});
});
</script>
</body>
</html>
上述代碼中,我們使用了Layui的form和table兩個組件,通過form.on監聽表單提交事件,在事件處理函數內部發送ajax請求并將結果更新到表格中。表格的渲染代碼在script標簽的最后面,使用Layui的table.render方法渲染表格,并設置url和cols屬性以獲取和展示查詢結果。
至此,我們成功使用Layui查詢PHP,完成了后端與前端之間的數據交互。使用這種方法,我們可以方便地對服務器上的數據進行查詢,并將結果展示給用戶。