Hongmu Notes
Home Language Notes PHP + HTML + jQuery + Bootstrap – Functional page for querying and modifying a database
Language Notes PHP mySql JavaScript Bootstrap

PHP + HTML + jQuery + Bootstrap – Functional page for querying and modifying a database

PHP + HTML + jQuery + Bootstrap – Functional page for querying and modifying a database

The screenshot is as follows:

20231104212449298-图片

Home page (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();
?>

Configure 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();
}

 

微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Related articles

PHP ob function record

PHP ob function record Language Notes PHP

Usage of the following three functions ob_get_contents(); ob_end_clean(); ob_start(); You can use these functions to buffer local files and execute local script code. Use ob_start() to save the output code into the buffer, and the page will not be displayed; then use ob_get_contents to get the data in the buffer. o…
👁 141
PHP preg

PHP preg Language Notes PHP

The preg_match_all function is used to perform a global regular expression match. preg_match_all() Syntax int preg_match_all ( string $pattern , string $subject [, array &$matches [, int $flags = PREG…
👁 169

Recommended reading

(PC+WAP) Marketing-oriented plastic sheet purification and eco-friendly equipment website – pbootCMS template; Green and eco-friendly hardware sheet website template download – 0101

(PC+WAP) Marketing-oriented plastic sheet purification and eco-friendly equipment website – pbootCMS template; Green and eco-friendly hardware sheet website template download – 0101 Practical Collection pbootcms Template

A PbootCMS marketing template designed for the plastic sheet, environmental protection equipment, and hardware sheet industries, featuring a green-themed design and supporting both PC and WAP devices. The page layout focuses on product showcasing and environmental sustainability messaging, helping companies specializing in eco-friendly materials build a green brand image online and attract targeted customers. Template Display | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin | Extraction Password: www...
👁 60
(PC+WAP) Custom Cable Tray Manufacturing Website – pbootCMS Template; Steel Structure Blue Universal Corporate Website Source Code Download – 0737

(PC+WAP) Custom Cable Tray Manufacturing Website – pbootCMS Template; Steel Structure Blue Universal Corporate Website Source Code Download – 0737 Practical Collection pbootcms Template

A PbootCMS template designed for customized cable tray production and the steel structure industry, featuring a blue, versatile corporate design style and compatibility with both PC and mobile devices. Its professional and practical design effectively showcases cable tray products, project examples, and technical specifications, enabling steel structure or cable tray manufacturers to efficiently acquire online customers and promote their brands. Template Display | Installation Instructions | Website Backend: /admin.php | Username: admin | Password: admin...
👁 40
Responsive Enterprise Communication Hub Service Website Template 0206

Responsive Enterprise Communication Hub Service Website Template 0206 Practical Collection Yiyou template

An eyouCMS responsive website template designed for the enterprise communication service management sector. Its professional, tech-oriented design is ideal for showcasing communication services, enterprise solutions, technical products, and client success stories. This template helps communication service providers effectively present their brand online and attract corporate clients. Template Overview | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for eyouCMS...
👁 47
Responsive interior design and building materials website template – 0870

Responsive interior design and building materials website template – 0870 Practical Collection Yiyou template

An eyouCMS responsive website template designed for home renovation and building materials enterprises. Its modern and professional design effectively showcases building materials products, renovation projects, and brand identity. This template helps building materials brands attract renovation companies and property owners online, thereby enhancing brand awareness. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for eyouCMS | eyouCMS (...
👁 49
When docking Baidu api, an error was reported, with error code: redirect_uri_mismatch error message: Invalid redirect uri.

When docking Baidu api, an error was reported, with error code: redirect_uri_mismatch error message: Invalid redirect uri. Summary of pitfalls

This error usually occurs when the authorized redirect URI used with the Baidu API does not match the redirect URI you configured in Application Management. You should check the following aspects for any discrepancies: verify whether the redirect URI you set in Application Management matches the redirect URI used in your code; confirm that your redirect URI is correct; and ensure that the redirect URI is a valid domain name or IP address for your application. Check...
👁 661