紅穆ノート
レコメンド › 言語ノート › PHP+HTML+jQuery+Bootstrapを用いたデータベースの検索・更新機能ページ
言語ノート PHP mySql JavaScript Bootstrap

PHP+HTML+jQuery+Bootstrapを用いたデータベースの検索・更新機能ページ

ブラウジング 265 📖 約 19 分
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();
}

 

微信赞赏

WeChat

支付宝赞赏

Alipay

著作権表示 · 再配布は禁止されています

著者： 紅穆

本文のリンク： https://www.4s5.cn/jp/archives/1580.html

著作権に関する説明：本記事はオリジナル記事です。無断での転載、収集、ミラー化は一切禁止されています。違反した者には法的措置が講じられます。転載をご希望の場合は、出典を明記し、原文のリンクを保持してください。

✍️ クリエイター： 紅穆

ウェブサイト管理者 · ご覧いただきありがとうございます！さらに多くの魅力的なコンテンツをお楽しみいただけますよう、引き続きご支援をお願いいたします。

著者プロフィール プロフィールを見る →

関連記事

PHPからJSファイルに変数を渡すにはどうすればよいですか？（JSファイル内のコードで外部の変数を取得するにはどうすればよいですか？）

PHPからJSファイルに変数を渡すにはどうすればよいですか？（JSファイル内のコードで外部の変数を取得するにはどうすればよいですか？） 言語ノート PHP JavaScript

PHPの変数をJavaScriptファイルに渡す方法には、いくつかの選択肢があります。その一つが「インラインJavaScript」です。これにより、例示コードと同様に、HTMLファイル内のJavaScriptコードに直接PHP変数を使用できます。これにより、PHPがJavaScriptコードを生成する際に、PHP変数の値を含めることができるようになります。しかし、この方法には…
👁 216
PHPを使用してMySQLデータベースを検索し、すべてのテーブルを取得した後、各テーブルの最初の8件のデータを出力します。

PHPを使用してMySQLデータベースを検索し、すべてのテーブルを取得した後、各テーブルの最初の8件のデータを出力します。 言語ノート PHP mySql

PHPコード：`<？php /** * MySQLデータベースのテーブル構造および各テーブルの最初の8件のデータをエクスポートする * データはid順に逆順で並べる（idがない場合は主キー/最初の列に従って逆順で並べる） * データベース：111、ユーザー名：11111、パスワード：1111 */ $host = 'localhost'; $user = '1111'; $pa…
👁 68
PHPのob関数の記録

PHPのob関数の記録 言語ノート PHP

以下の3つの関数（`ob_get_contents()`、`ob_end_clean()`、`ob_start()`）を用いることで、ローカルファイルのバッファリングやローカルスクリプトコードの実行を実現できます。`ob_start()`を用いて出力されるコードをバッファに保存すると、ページは即座に表示されません。その後、`ob_get_contents()`を呼び出してバッファに保存されたデータを取得します。
👁 153
PHP preg

PHP preg 言語ノート PHP

`preg_match_all` 関数は、グローバルな正規表現マッチングを実行するために使用されます。`preg_match_all()` の構文は以下の通りです：`int preg_match_all( string $pattern , string $subject [, array &$matches [, int $flags = PREG… ] )`
👁 173

おすすめ読書

PHPを使用した正規表現処理により、記事内に含まれる画像リンクを抽出し、それらの画像をローカルにダウンロードするとともに、記事内のリンクを置き換える。

PHPを使用した正規表現処理により、記事内に含まれる画像リンクを抽出し、それらの画像をローカルにダウンロードするとともに、記事内のリンクを置き換える。 言語ノート PHP

PHPで、記事内の画像リンクを正規表現を用いて抽出し、画像をローカルにダウンロードするには、以下の手順を実行してください：まず、Webページのソースコードから処理対象の記事テキストを取得します。次に、このテキストから画像リンクを正規表現で抽出します。具体的には、以下のコードを使用します：`preg_match_all('<img.+?src=[\"\']（.+？）[\"\'].*?>/i'，$content，$…`
👁 397
pbootcmsのSQLiteデータベースをMySQLデータベースに変換する

pbootcmsのSQLiteデータベースをMySQLデータベースに変換する プログラムノート PbootCms

なぜMySQLデータベースに変換するのでしょうか？データベース内のデータ量が1万件程度に達した場合、SQLiteとMySQLを用いる際には以下の違いがあります。パフォーマンス：SQLiteは組み込み型データベースであり、軽量なアプリケーションに適しています。データはディスクファイルで保存され、単一の接続のみが許可されます。一方、MySQLは完全なクライアント/サーバー型のリレーショナルデータベース管理システムであり、複数の接続をサポートでき、さらに…
👁 629
Fireworksのソースコードを確認する

Fireworksのソースコードを確認する 実用収集 ウェブサイトのソースコード

🔒 裏面コンテンツ：コメント後にリンクを確認してください：https://pan.baidu.com/s/1G3eLaecjq34uvbRiU-K1GA?pwd=9257　抽出コード：9257　この内容をコピーし、Baidu Netdiskのスマートフォンアプリを開いてください。操作がより便利です。コードはシンプルで、アップロードして解凍するだけで実行し、結果を確認できます。
👁 286