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;
|
?
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 を取得する関数であるため、ソース コードをダウンロードして参照することはできません。
さて、ユーザーのログインとログアウトの手順が完了しました。避けられない欠点がありますので、ご批判や修正を歓迎します。
以上がこの記事の全内容ですが、皆さんに気に入っていただければ幸いです。

PHPは、現代のWeb開発、特にコンテンツ管理とeコマースプラットフォームで依然として重要です。 1)PHPには、LaravelやSymfonyなどの豊富なエコシステムと強力なフレームワークサポートがあります。 2)パフォーマンスの最適化は、Opcacheとnginxを通じて達成できます。 3)PHP8.0は、パフォーマンスを改善するためにJITコンパイラを導入します。 4)クラウドネイティブアプリケーションは、DockerおよびKubernetesを介して展開され、柔軟性とスケーラビリティを向上させます。

PHPは、特に迅速な開発や動的なコンテンツの処理に適していますが、データサイエンスとエンタープライズレベルのアプリケーションには良くありません。 Pythonと比較して、PHPはWeb開発においてより多くの利点がありますが、データサイエンスの分野ではPythonほど良くありません。 Javaと比較して、PHPはエンタープライズレベルのアプリケーションでより悪化しますが、Web開発により柔軟性があります。 JavaScriptと比較して、PHPはバックエンド開発により簡潔ですが、フロントエンド開発のJavaScriptほど良くありません。

PHPとPythonにはそれぞれ独自の利点があり、さまざまなシナリオに適しています。 1.PHPはWeb開発に適しており、組み込みのWebサーバーとRich Functionライブラリを提供します。 2。Pythonは、簡潔な構文と強力な標準ライブラリを備えたデータサイエンスと機械学習に適しています。選択するときは、プロジェクトの要件に基づいて決定する必要があります。

PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting()やvar_dump()などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7

PHPが多くのWebサイトよりも優先テクノロジースタックである理由には、その使いやすさ、強力なコミュニティサポート、広範な使用が含まれます。 1)初心者に適した学習と使用が簡単です。 2)巨大な開発者コミュニティと豊富なリソースを持っています。 3)WordPress、Drupal、その他のプラットフォームで広く使用されています。 4)Webサーバーとしっかりと統合して、開発の展開を簡素化します。

PHPは、特にWeb開発の分野で、最新のプログラミングで強力で広く使用されているツールのままです。 1)PHPは使いやすく、データベースとシームレスに統合されており、多くの開発者にとって最初の選択肢です。 2)動的コンテンツ生成とオブジェクト指向プログラミングをサポートし、Webサイトを迅速に作成および保守するのに適しています。 3)PHPのパフォーマンスは、データベースクエリをキャッシュおよび最適化することで改善でき、その広範なコミュニティと豊富なエコシステムにより、今日のテクノロジースタックでは依然として重要になります。

PHPでは、弱い参照クラスを通じて弱い参照が実装され、ガベージコレクターがオブジェクトの回収を妨げません。弱い参照は、キャッシュシステムやイベントリスナーなどのシナリオに適しています。オブジェクトの生存を保証することはできず、ごみ収集が遅れる可能性があることに注意する必要があります。

\ _ \ _ Invokeメソッドを使用すると、オブジェクトを関数のように呼び出すことができます。 1。オブジェクトを呼び出すことができるように\ _ \ _呼び出しメソッドを定義します。 2。$ obj(...)構文を使用すると、PHPは\ _ \ _ Invokeメソッドを実行します。 3。ロギングや計算機、コードの柔軟性の向上、読みやすさなどのシナリオに適しています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ドリームウィーバー CS6
ビジュアル Web 開発ツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
