www

ajax

  • ユーザー登録する際に ajax で ログインアカウント が他人と重複していないか 調べるサンプルは?

    ユーザー登録の際に、AJAXを使用してログインアカウントが他のユーザーと重複していないか確認するサンプルコードを提供します。

    以下のコードは、ユーザーがログインアカウントを入力した後、AJAXリクエストでサーバーにそのアカウントが既に使用されているかを問い合わせ、結果に応じてエラーメッセージを表示する例です。

    1. HTML (ユーザー登録フォーム)

    
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ユーザー登録</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <h2>ユーザー登録フォーム</h2>
    <form id="registrationForm">
        <label for="username">ログインアカウント:</label>
        <input type="text" id="username" name="username" required>
        <span id="username-error" style="color: red; display: none;">このアカウントはすでに使用されています。</span>
        <br><br>
        <button type="submit">登録</button>
    </form>

    <script>
        $(document).ready(function() {
            // ユーザー名入力時にAJAXで重複チェック
            $('#username').on('blur', function() {
                var username = $(this).val();
                if (username !== "") {
                    $.ajax({
                        url: 'check_username.php', // サーバー側で重複をチェックするPHPファイル
                        type: 'POST',
                        data: { username: username },
                    })
                    .done(function(response) {  // AJAX成功時に実行される
                        if (response === 'exists') {
                            $('#username-error').show();  // 重複があればエラーメッセージを表示
                        } else {
                            $('#username-error').hide();  // 重複していなければエラーメッセージを非表示
                        }
                    })
                    .fail(function() {  // AJAX失敗時のエラーハンドリング
                        alert('エラーが発生しました。');
                    });
                }
            });
        });
    </script>

</body>
</html>

    2. PHP (サーバーサイドでの重複チェック)

     check_username.php 
    <?php

$host 	= 'localhost';
$dbname = 'shop';
$user 	= 'root';
$password ='wert3333';
// 普通はこんな感じに変数にします
$pdo=new PDO("mysql:host=$host;dbname=$dbname;charset=utf8" , $user, $password );
// ユーザー名を受け取る
if (isset($_POST['username'])) {
    $username = htmlspecialchars($_POST['username']);
    
    // ユーザー名の重複チェック
    $sql = "SELECT * FROM customer WHERE login = '$username'";
    $result = $pdo->query($sql);
    
    if ( !empty($result->fetch()) > 0) {
        // 重複している場合
        echo 'exists';
    } else {
        // 重複していない場合
        echo $username;
    }
}