项目默认存在的东西：jquery库[jquery.min.js]
登录功能实现的基本逻辑：
1.书写前台php功能基本页面：（index.php）
a.编写基本功能，比如用户名、密码、登录
b.引用jquery库[jquery.min.js]和页面用到的js[my.js]
注意:引用要放在<body最后>而且要先引用jquery库再引用my.js
2.书写js提交页面，主要包括要提交的内容（my.js）
a.点击登录按钮后对提交内容进行封装，采用ajax提交
3.对提交的js需求进行判断(login.js进行判断)
a.连接数据库配置文件 conn.php[其中包括数据库名密码路径等]
b.判断前台提交的用户名和密码是否正确
c.返回查询结果
4.前台页面显示执行的结果
a.用户名或密码错误
b.不允许为空等
c.成功跳转。
实际项目例子：
1.前台php功能页面：index.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="login">
<h3>用户登录</h3>
<div id="login_form">
<p><label>用户名：</label> <input type="text" class="input" name="user" id="user" /></p>
<p><label>密 码：</label> <input type="password" class="input" name="pass" id="pass" />
</p>
<div class="sub">
<input type="submit" class="btn" value="登 录" />
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</body>
</html>
2.书写获取的信息并且进行封装提交 my.js[此处只以登录为例]
(function($) { $(".btn").on('click',function(){
var user = $("#user").val();
var pass = $("#pass").val();
if(user==""){
$('<div id="msg" />').html("用户名不能为空！").appendTo('.sub').fadeOut(2000);
$("#user").focus();
return false;
}
if(pass==""){
$('<div id="msg" />').html("密码不能为空！").appendTo('.sub').fadeOut(2000);
$("#pass").focus();
return false;
}
$.ajax({
type: "POST",
url: "login.php?action=login",
dataType: "json",
data: {"user":user,"pass":pass},
beforeSend: function(){
$('<div id="msg" />').addClass("loading").html("正在登录...").css("color","#999") .appendTo('.sub');
},
success: function(json){
if(json.success==1){
$("#login_form").remove();
var div = "<div id='result'><p><strong>"
+ "</strong> 恭喜您登录成功！</p> "
</div>"
$("#login").append(div);
}else{
$("#msg").remove();
$('<div id="errmsg" />').html(json.msg).css("color","#999").appendTo('.sub') .fadeOut(2000);
return false;
}
}
});
});
})(jQuery);
3.对my.js提交的用户名和密码进行检查，返回相应结果（login.php）
<?php
session_start();
require_once ('conn.php');
$action = $_GET['action'];
if ($action == 'login') { //登录
$user = stripslashes(trim($_POST['user']));
$pass = stripslashes(trim($_POST['pass']));
if (empty ($user)) {
echo '用户名不能为空';
exit;
}
if (empty ($pass)) {
echo '密码不能为空';
exit;
}
$query = mysql_query("select * from user where userId='$user'");
$us = is_array($row = mysql_fetch_array($query));
//$ps = $us ? $md5pass == $row['password'] : FALSE;
$ps = $us ? $pass == $row['userpwd'] : FALSE;
$arr['row'] = $row;
if ($ps) {
$rs = true;
if ($rs) {
$arr['success'] = 1;
$arr['msg'] = '登录成功！';
$arr['user'] = $_SESSION['user'];
$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'] = '登录失败';
}
} else {
$arr['success'] = 0;
$arr['msg'] = '用户名或密码错误！';
}
echo json_encode($arr); //输出json数据
}
elseif ($action == 'logout') { //退出
unset($_SESSION);
session_destroy();
echo '1';
}
4.conn.php
<?php
/* 数据库的配置*/
$server_name = $_SERVER['HTTP_HOST'];
error_reporting(E_ERROR);
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_CHARSET', 'utf-8');
define('DB_NAME', 'test');
$server_name = 'localhost/Test';
define('DB_PWD', '1234');
$db = mysql_connect(DB_HOST, DB_USER, DB_PWD) or die ("数据库连接错误: ".mysql.error());
mysql_select_db(DB_NAME, $db);
mysql_set_charset(DB_CHARSET,$db);
mysql_query('set names utf8'); ?>
项目框架展示：
登录页面展示：
成功登录结果展示：
