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

WBOY
リリース: 2016-07-13 16:55:10
オリジナル
1006 人が閲覧しました

この記事は主に、更新せずにユーザーログインの効果を実現するための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+", ログイン成功おめでとうございます!


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


& Lt; このサイトにログインする時間は次のとおりです: & lt;/span & lt;/p & gt; < a href = '#' id = 'logout'> $("#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...

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート