php ajaxユーザーのログインと終了_PHPチュートリアル

この記事は主に、更新せずにユーザーログインの効果を実現するためのjqueryでのajaxとphpの組み合わせについて説明しています。必要な友人はそれを参照してください。

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

コードは次のとおりです

コードをコピー

テーブル `user` を作成 ( `id` int(11) NOT NULL auto_increment、 `username` varchar(30) NOT NULL コメント 'username'、 `パスワード` varchar(32) NOT NULL コメント 'パスワード'、 `login_time` int(10) デフォルト NULL コメント 'ログイン時間'、 `login_ip` varchar(32) デフォルト NULL コメント 'ログイン IP'、 `login_counts` int(10) NOT NULL デフォルト '0' COMMENT 'ログイン数'、 主キー (`id`) ) エンジン=MyISAM デフォルト文字セット=utf8; 次に、ユーザー情報データを user テーブルに挿入します。 「user」に挿入 (「id」、「username」、「password」、「login_time」、「login_ip」、「login_counts」) VALUES(1, 'デモ', 'fe01ce2a7fbac8fafaed7c982a04e229', '', '', 0);

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

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

コードは次のとおりですコードをコピー

ユーザーログイン

                                                                    If(isset($_SESSION['user'])){

& Lt; & gt; & gt; Php echo ['user'];? おめでとうございます!

& Lt; あなたは & lt; スパン & gt;? Php echo ['login_counts'];?

一人で

【終了】

                                                                             

ユーザー名： & Lt; & gt; ラベル & gt; 入力タイプ = "パスワード" ID = "パス"

                                                                                                     

                                                                              

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

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

コードは次のとおりです	コードをコピー

コードは次のとおりです$("入力:テキスト,テキストエリア,入力:パスワード").focus(function() {

コードをコピー

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

$(this).removeClass("cur_select"); });

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

コードは次のとおりです

コードをコピー

$(".btn").live('click',function(){
var ユーザー = $("#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=login",
データ型: "json"、
データ: {"ユーザー":ユーザー,"パス":パス}、
beforeSend: function(){
$('

').addClass("loading").html("ログイン中...").css("color","#999")
.appendTo('.sub'); }、
成功: function(json){
If(json.success==1){
$("#login_form").remove(); var div = "

"+json.user+", ログイン成功おめでとうございます!

＆lt; p＆gt;これは、＆lt; span＆gt; "+json.login_counts+"＆lt;/span＆gt;このサイトにログインする時間です。

& Lt; このサイトにログインする時間は次のとおりです: & lt;/span & lt;/p & gt; ＆lt; a href = '＃' id = 'logout'＆gt; $("#login").append(div); }その他{
$("#msg").remove(); $('

').html(json.msg).css("color","#999").appendTo('.sub')
.fadeOut(2000); false を返します
                                                                             }
}); });

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

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

コードは次のとおりです

コードをコピー

$("#logout").live('click',function(){
$.post("login.php?action=logout",function(msg){
if(msg==1){
$("#result").remove(); var div = "

ユーザー名:

外に出ます id='pass' />

                                                                               $("#login").append(div); }
}); });

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

技術記事

コードは次のとおりです

コードをコピー

セッション開始(); 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 ? $md5pass == $row['パスワード'] : FALSE; If ($ps) { $counts = $row['login_counts'] + 1; $_SESSION['ユーザー'] = $row['ユーザー名']; $_SESSION['login_time'] = $row['login_time'] $_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['success'] = 1; $arr['msg'] = 'ログインに成功しました! '; $arr['ユーザー'] = $_SESSION['ユーザー']; $arr['login_time'] = date('Y-m-d H:i:s',$_SESSION['login_time']); $arr['login_counts'] = $_SESSION['login_counts']; } else { $arr['success'] = 0; $arr['msg'] = 'ログインに失敗しました'; } } その他 { $arr['成功'] = 0; $arr['msg'] = 'ユーザー名またはパスワードが間違っています! '; } Echo json_encode($arr); // jsonデータを出力します } elseif ($action == 'logout') { //終了 設定を解除($_SESSION) セッション破壊(); エコー「1」 } フロントエンドリクエストが終了したら、セッションからログアウトし、処理のためにフロントエンドJSに1を返します。上記のコードの get_client_ip() はクライアント IP を取得する関数ですが、スペースの制限によりリストできないことに注意してください。 http://www.bkjia.com/PHPjc/631694.html www.bkjia.com tru​​e http://www.bkjia.com/PHPjc/631694.html

この記事では主に、更新せずにユーザーログインの効果を実現するための jquery での ajax と php の組み合わせについて説明します。必要な友人は参照してください。 この例では、Mysql データベースを使用して use...