この記事は主に、更新せずにユーザーログインの効果を実現するための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'];?
一人で
【終了】
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 = " |
|
|
|