PHP+jQuery+Ajax によるユーザー ログインとログアウトの実装_PHP チュートリアル

PHP+jQuery+Ajaxでユーザーのログインとログアウトを実現

PHP+jQuery+Ajaxでユーザーのログインとログアウトを実現

この記事では、Ajax を使用して、更新せずにログインおよびログアウトすることで、ユーザー エクスペリエンスを向上させています。 ユーザーがログインしている場合は、ユーザーの関連ログイン情報が表示され、ログインしていない場合はログイン フォームが表示されます。

ユーザーのログインおよびログアウト機能は多くの場所で使用されており、一部のプロジェクトでは、ログインに Ajax を使用する必要があります。ログインに成功すると、ページの一部のみが更新されるため、ユーザー エクスペリエンスが向上します。この記事では、PHP と jQuery を使用してログイン機能とログアウト機能を実装します。

データベースの準備

この例では、Mysql データベースを使用して、次のテーブル構造を持つユーザー テーブルを作成します。

?

1 2 3 4 5 6 7 8 9

テーブル `user` を作成 ( `id` int(11) NOT NULL auto_increment, `ユーザー名` varchar(30) NOT NULL コメント 'ユーザー名', `パスワード` varchar(32) NOT NULL コメント 'パスワード', `login_time` int(10) デフォルト NULL コメント 'ログイン時間', `login_ip` varchar(32) デフォルト NULL コメント 'ログイン IP', `login_counts` int(10) NOT NULL デフォルト '0' COMMENT 'ログイン数', 主キー (`id`) ) ENGINE=MyISAM デフォルト CHARSET=utf8;

次に、ユーザー情報データを user テーブルに挿入します。

?

index.php

ユーザー名とパスワードを入力すると、正常にログインするように求められ、関連するログイン情報が表示され、「終了」をクリックすると、ユーザーのログインインターフェイスが終了します。

ユーザーがログインしている場合は、ログイン情報が表示されます。ユーザーがログインしていない場合は、ログインを求めるログインボックスが表示されます。

?

1 2	「user」に挿入 (「id」、「username」、「password」、「login_time」、「login_ip」、「login_counts」) VALUES(1, 'デモ', 'fe01ce2a7fbac8fafaed7c982a04e229', '', '', 0);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ユーザーログイン if(isset($_SESSION['user'])){ ?> , ログイン成功おめでとうございます! これは、このサイトへの ログインです。 このサイトに最後にログインしたのは: 【終了】 ユーザー名: パスワード:

index.php ファイルのヘッダーに次のステートメントを追加する必要があることに注意してください: session_start; 同時に、head 部分に jquery ライブラリを導入し、ログイン ボックスの美しい CSS スタイルを記述することもできます。もちろん、このサンプルはすでに簡単に書かれていますので、ソースコードをご覧ください。

?

1 2

global.js

global.js ファイルには、実装する jquery コードが含まれています。最初に行うことは、Baidu や Google のように、入力ボックスを開くとすぐにマウス カーソルが入力ボックス内にあるようにすることです。使用コードは次のとおりです:

?

1 2 3

$(関数(){ $("#user").focus(); });

次に行うことは、入力ボックスがフォーカスを獲得したときと失ったときに異なるスタイルを表示することです。たとえば、この例では、異なる境界線の色が使用されています。

?

1 2 3 4 5 6

$("入力:テキスト,テキストエリア,入力:パスワード").focus(function() { $(this).addClass("cur_select"); }); $("入力:テキスト,テキストエリア,入力:パスワード").blur(function() { $(this).removeClass("cur_select"); });

ユーザーログイン: ユーザーがログインボタンをクリックした後、まずユーザーの入力を空にすることができないことを確認し、次にバックグラウンドのlogin.phpにAjaxリクエストを送信する必要があります。バックグラウンド検証ログインが成功すると、ログインしたユーザーの情報が返されます。ログインに失敗した場合は、ユーザーのログイン数や最終ログイン時刻などの情報が返されます。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

$(".btn").live('クリック',function(){ var user = $("#user").val(); var pass = $("#pass").val(); if(user==""){ $(' ').html("ユーザー名を空にすることはできません!").appendTo('.sub').fadeOut(2000); $("#user").focus(); false を返す; } if(pass==""){ $(' ').html("パスワードを空にすることはできません!").appendTo('.sub').fadeOut(2000); $("#pass").focus(); false を返す; } $.ajax({ タイプ:「POST」、 URL: "login.php?action=ログイン", データタイプ: "json", データ: {"ユーザー":ユーザー,"パス":パス}, 送信前: function(){ $(' ').addClass("loading").html("ログイン中...").css("color","#999") .appendTo('.sub'); }、 成功: function(json){ if(json.success==1){ $("#login_form").remove(); var div = " "+json.user+", ログイン成功おめでとうございます! これは、このサイトにログインした "+json.login_counts+" 時間です。 このサイトに最後にログインしたのは次の日です: "+json.login_time+" 【終了】 "; $("#login").append(div); }その他{ $("#msg").remove(); $(' ').html(json.msg).css("color","#999").appendTo('.sub') .fadeOut(2000); false を返す; } } }); });

Ajax リクエストを行うとき、データ送信形式は json であり、返されるデータも JS を使用して json データを解析してログイン後のユーザー情報を取得し、それを #login 要素に追加します。ログイン操作を完了します。

ユーザー終了：「終了」をクリックすると、Ajaxリクエストがlogin.phpに送信され、すべてのセッションがバックグラウンドでログアウトされ、ページはログインインターフェイスに戻ります。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$("#logout").live('click',function(){ $.post("login.php?action=logout",function(msg){ if(msg==1){ $("#result").remove(); var div = " ユーザー名: パスワード: id='pass' /> "; $("#login").append(div); } }); });

login.php

フロントからのリクエストに従い、ログイン時にユーザーが入力したユーザー名とパスワードを取得し、データベース内の対応するユーザー名とパスワードと比較し、成功した場合はユーザーのログイン情報を取得します。が更新され、json データがフロントデスクに渡されます。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

session_start(); require_once ('connect.php'); $アクション = $_GET['アクション']; if ($action == 'login') { //ログイン $user = ストリップスラッシュ(trim($_POST['user'])); $pass = ストリップスラッシュ(trim($_POST['pass'])); if (空の空 ($user)) { echo 'ユーザー名を空にすることはできません'; 終了; } if (空の空 ($pass)) { echo 'パスワードを空にすることはできません'; 終了; } $md5pass = md5($pass); //パスワードは md5 を使用して暗号化されます $query = mysql_query("select * from user where username='$user'"); $us = is_array($row = mysql_fetch_array($query)); $ps = $us ? == $row['パスワード'] : FALSE; if ($ps) { $counts = $row['login_counts'] + 1; $_SESSION['ユーザー'] = $row['ユーザー名']; $_SESSION['ログイン時間'] = $row['ログイン時間']; $_SESSION['login_counts'] = $counts; $ip = get_client_ip() //ログインIPを取得します $logintime = mktime(); $rs = mysql_query("ユーザー設定の更新login_time='$logintime',login_ip='$ip', login_counts='$counts'"); if ($rs) { $arr['成功'] = 1; $arr['msg'] = 'ログイン成功! '; $arr['ユーザー'] = $_SESSION['ユーザー']; $arr['login_time'] = date('Y-m-d H:i:s',$_SESSION['login_time']); $arr['login_counts'] = $_SESSION['login_counts']; } 他 { $arr['成功'] = 0; $arr['msg'] = 'ログインに失敗しました'; } } 他 { $arr['成功'] = 0; $arr['msg'] = 'ユーザー名またはパスワードが間違っています! '; } echo json_encode($arr) //jsonデータを出力します } elseif ($action == 'logout') { //終了 設定解除($_SESSION); session_destroy(); エコー '1'; }

フロントエンドが終了を要求したら、セッションからログアウトし、処理のためにフロントエンド JS に 1 を返します。上記のコードの get_client_ip() はクライアント IP を取得する関数であるため、ソース コードをダウンロードして参照することはできません。

さて、ユーザーのログインとログアウトの手順が完了しました。避けられない欠点がありますので、ご批判や修正を歓迎します。

以上がこの記事の全内容ですが、皆さんに気に入っていただければ幸いです。

http://www.bkjia.com/PHPjc/990986.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/990986.html技術記事 PHP+jQuery+Ajax は、ユーザーのログインと終了を実装します。この記事では、Ajax を使用して、更新せずにログインと終了を行うことで、ユーザー エクスペリエンスを向上させます。 ユーザーがログインしている場合...