検索
ホームページバックエンド開発PHPチュートリアル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 を取得する関数であるため、ソース コードをダウンロードして参照することはできません。

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

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

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/990986.html技術記事 PHP+jQuery+Ajax は、ユーザーのログインと終了を実装します。この記事では、Ajax を使用して、更新せずにログインと終了を行うことで、ユーザー エクスペリエンスを向上させます。 ユーザーがログインしている場合...
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
PHPの現在のステータス:Web開発動向を見てくださいPHPの現在のステータス:Web開発動向を見てくださいApr 13, 2025 am 12:20 AM

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

PHP対その他の言語:比較PHP対その他の言語:比較Apr 13, 2025 am 12:19 AM

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

PHP対Python:コア機能と機能PHP対Python:コア機能と機能Apr 13, 2025 am 12:16 AM

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

PHP:Web開発の重要な言語PHP:Web開発の重要な言語Apr 13, 2025 am 12:08 AM

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

PHP:多くのウェブサイトの基礎PHP:多くのウェブサイトの基礎Apr 13, 2025 am 12:07 AM

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

誇大広告を超えて:今日のPHPの役割の評価誇大広告を超えて:今日のPHPの役割の評価Apr 12, 2025 am 12:17 AM

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

PHPの弱い参照は何ですか、そしていつ有用ですか?PHPの弱い参照は何ですか、そしていつ有用ですか?Apr 12, 2025 am 12:13 AM

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

PHPで__invoke Magicメソッドを説明してください。PHPで__invoke Magicメソッドを説明してください。Apr 12, 2025 am 12:07 AM

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

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

mPDF

mPDF

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