PHP+HTML+jQuery+bootstrap 查詢修改數據庫的功能頁面

截圖如下：

20231104212449298-图片

首頁index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查詢和充值</title>
    <!-- 引入 Bootstrap 樣式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">查詢和充值</h1>

        <form id="queryForm">
            <div class="mb-3">
                <label for="username" class="form-label">用戶名：</label>
                <input type="text" class="form-control" id="username">
            </div>
            <button type="submit" class="btn btn-primary">查詢</button>
        </form>

        <div id="loading" class="text-center mt-3" style="display: none;">
            <div class="spinner-border text-primary" role="status"></div>
            <div class="mt-2">加載中...</div>
        </div>

        <div id="playerData" class="mt-4" style="display: none;">
            <h2>玩家數據</h2>
            <div class="mb-3">
                <label for="id" class="form-label">ID：</label>
                <input type="text" class="form-control" id="id" readonly>
            </div>
            <div class="mb-3">
                <label for="vp" class="form-label">VP：</label>
                <input type="text" class="form-control" id="vp">
            </div>
            <div class="mb-3">
                <label for="dp" class="form-label">DP：</label>
                <input type="text" class="form-control" id="dp">
            </div>
            <div class="mb-3">
                <label for="location" class="form-label">location：</label>
                <input type="text" class="form-control" id="location">
            </div>
            <div class="mb-3">
                <label for="nickname" class="form-label">nickname：</label>
                <input type="text" class="form-control" id="nickname">
            </div>
            <button id="rechargeBtn" class="btn btn-primary">充值</button>
        </div>

        <div id="log" class="mt-4"></div>

        <!-- 引入 jQuery -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <!-- 引入 Bootstrap JS -->
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
        <script>
		$(document).ready(function() {
			// 綁定表單提交事件
			$('#queryForm').submit(function(event) {
				event.preventDefault();
				var username = $('#username').val();

				// 顯示加載動畫
				$('#loading').show();
				$('#playerData').hide();

				// 發送POST請求
				$.ajax({
					url: 'account.php',
					type: 'POST',
					dataType: 'json',
					data: { username: username },
					success: function(response) {
						// 隱藏加載動畫
						$('#loading').hide();

						if (response.error) {
							// 顯示錯誤信息
							alert(response.error);
						} else {
							// 顯示玩家數據
							var playerData = response.playerData;
							for (var i = 0; i < playerData.length; i++) {
								var id = playerData[i].id;
								var vp = playerData[i].vp;
								var dp = playerData[i].dp;
								var location = playerData[i].location;
								var nickname = playerData[i].nickname;

								// 將數據顯示在頁面上的相應元素中
								$('#id').val(id);
								$('#vp').val(vp);
								$('#dp').val(dp);
								$('#location').val(location);
								$('#nickname').val(nickname);
							}

							// 顯示玩家數據區域
							$('#playerData').show();

							// 顯示日誌信息
							var logInfo = response.logInfo;
							for (var i = 0; i < logInfo.length; i++) {
								var logMessage = '充值ID' + logInfo[i].id+ '：' + logInfo[i].logTime + '充值，充值後數據爲：【vp：' + logInfo[i].vp + '】' + '【dp：' + logInfo[i].dp + '】';
								$('#log').append('<p>' + logMessage + '</p>');
							}
						}
					},
					error: function() {
						// 隱藏加載動畫
						$('#loading').hide();
						alert('請求出錯');
					}
				});
			});

			// 綁定充值按鈕點擊事件
			$('#rechargeBtn').click(function() {
				var id = $('#id').val();
				var vp = $('#vp').val();
				var dp = $('#dp').val();
				var location = $('#location').val();
				var nickname = $('#nickname').val();

				// 顯示充值中的加載動畫
				$('#rechargeBtn').html('<div class="spinner-border spinner-border-sm" role="status"></div> 充值中...');
				$('#rechargeBtn').attr('disabled', true);

				// 發送POST請求
				$.ajax({
					url: 'recharge.php',
					type: 'POST',
					dataType: 'json',
					data: { id: id, vp: vp, dp: dp, location: location, nickname: nickname },
					success: function(response) {
						if (response.success) {
							alert('充值成功');

							// 重新查詢數據
							$.ajax({
								url: 'account.php',
								type: 'POST',
								dataType: 'json',
								data: { username: $('#username').val() },
								success: function(response) {
									if (!response.error) {
										// 更新玩家數據
										var playerData = response.playerData;
										for (var i = 0; i < playerData.length; i++) {
											var id = playerData[i].id;
											var vp = playerData[i].vp;
											var dp = playerData[i].dp;
											var location = playerData[i].location;
											var nickname = playerData[i].nickname;

											// 將數據顯示在頁面上的相應元素中
											$('#id').val(id);
											$('#vp').val(vp);
											$('#dp').val(dp);
											$('#location').val(location);
											$('#nickname').val(nickname);
										}
									}
								},
								error: function() {
									alert('請求出錯');
								}
							});
						} else {
							alert('充值失敗，請重試');
						}

						// 恢復充值按鈕狀態
						$('#rechargeBtn').html('充值');
						$('#rechargeBtn').attr('disabled', false);
					},
					error: function() {
						alert('請求出錯');
						// 恢復充值按鈕狀態
						$('#rechargeBtn').html('充值');
						$('#rechargeBtn').attr('disabled', false);
					}
				});
			});
		});
        </script>
    </div>
</body>

</html>

account.php

<?php
require('./config.php');

// 獲取玩家用戶名
$username = $_POST['username'];

// 準備查詢玩家ID的SQL語句，並綁定參數
$stmt1 = $conn1->prepare("SELECT id FROM account WHERE username = ?");
$stmt1->bind_param("s", $username);
$stmt1->execute();
$result1 = $stmt1->get_result();

if ($result1->num_rows > 0) {
    $row1 = $result1->fetch_assoc();
    $playerId = $row1["id"];

    // 準備查詢玩家數據的SQL語句，並綁定參數
    $stmt2 = $conn2->prepare("SELECT * FROM account_data WHERE id = ?");
    $stmt2->bind_param("i", $playerId);
    $stmt2->execute();
    $result2 = $stmt2->get_result();

    if ($result2->num_rows > 0) {
        $playerData = array();
        while ($row2 = $result2->fetch_assoc()) {
            $playerData[] = $row2;
        }

        // 查詢日誌信息
        $stmt_log = $conn1->prepare("SELECT * FROM account_pay_logs WHERE userID = ?");
        $stmt_log->bind_param("i", $playerId);
        $stmt_log->execute();
        $result_log = $stmt_log->get_result();
        $logInfo = array();
        while ($row_log = $result_log->fetch_assoc()) {
            $logInfo[] = $row_log;
        }

        // 創建包含玩家數據和日誌信息的關聯數組
        $responseData = array(
            'playerData' => $playerData,
            'logInfo' => $logInfo
        );

        // 返回JSON數據
        echo json_encode($responseData);
    } else {
        // 返回錯誤信息
        echo json_encode(array('error' => '未找到玩家數據'));
    }
} else {
    // 返回錯誤信息
    echo json_encode(array('error' => '未找到玩家'));
}

closeMysqli();
?>

recharge.php

<?php
require('./config.php');

// 獲取表單數據
$id = $_POST['id'];
$vp = $_POST['vp'];
$dp = $_POST['dp'];
$location = empty($_POST['location'])?" ":$_POST['location'];
$nickname = empty($_POST['nickname'])?" ":$_POST['nickname'];

// 驗證輸入數據
if (!is_numeric($id) || !is_numeric($vp) || !is_numeric($dp) || empty($location) || empty($nickname)) {
    $result = array('success' => false, 'error' => 'Invalid input');
    echo json_encode($result);
    exit();
}

$time = date("Y-m-d H:i:s");
// 準備更新語句，並綁定參數
$stmt = $conn2->prepare("UPDATE account_data SET vp=?, dp=?, location=?, nickname=? WHERE id=?");
$stmt->bind_param("iissi", $vp, $dp, $location, $nickname, $id);

if ($stmt->execute()) {
    // 如果更新成功，插入日誌到account_pay_logs表
    $stmt_log = $conn1->prepare("INSERT INTO account_pay_logs (userID, vp, dp, location, nickname, logTime) VALUES (?, ?, ?, ?, ?, ?)");
    if ($stmt_log === false) {
        die("Prepare failed: " . $conn1->error);
    }
    $stmt_log->bind_param("iiisss", $id, $vp, $dp, $location, $nickname, $time);
    
    if ($stmt_log->execute()) {
        $result = array('success' => true);
    } else {
        $result = array('success' => false, 'error' => $conn1->error);
    }
    
    echo json_encode($result);
} else {
    $result = array('success' => false, 'error' => $conn2->error);
    echo json_encode($result);
}

closeMysqli();
?>

配置config.php

🔒 隱藏內容：評論後查看

<?php
// 連接數據庫1--玩家主表account
$servername1 = "localhost";
$username1 = "tp_hmcms_com";
$password1 = "tp_hmcms_com";
$dbname1 = "tp_hmcms_com";

$conn1 = new mysqli($servername1, $username1, $password1, $dbname1);
if ($conn1->connect_error) {
    die("連接數據庫1失敗: " . $conn1->connect_error);
}

// 連接數據庫2--玩家數據表account_data
$servername2 = "localhost";
$username2 = "tp_hmcms_com2";
$password2 = "tp_hmcms_com2";
$dbname2 = "tp_hmcms_com2";

$conn2 = new mysqli($servername2, $username2, $password2, $dbname2);
if ($conn2->connect_error) {
    die("連接數據庫2失敗: " . $conn2->connect_error);
}

function closeMysqli(){
	global $conn1,$conn2;
	$conn1->close();
	$conn2->close();
}