php+ajax 登录注册页面
主要是登录注册功能，前端后台验证没有什么，这个大家可以自己加上去，比如过滤啊，正则啊等
还是先放图吧
这是登录及注册界面 点击注册切换到注册界面，点击登录切换到登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body,html{
padding: 0px;
margin: 0px;
}
.header {
width: %;
padding: 0px;
margin: 0px;
background-color: #699C03;
} .header-nav {
min-width: 1170px; height: 50px;
line-height: 50px;
} .header-nav-left {
float: left;
padding-left: 150px;
margin-top: 10px;
} .header-nav-left h3 {
font-size: 18px;
line-height: 25px;
margin: 0px;
color: #fff;
} .header-nav-right {
float: right;
width: 59.9999%;
position: relative;
height: 50px;
} .header-nav-right ul {
padding: 0px;
margin: 0px;
list-style: none;
position: absolute;
right: 25px;
} .header-nav-right ul li {
float: left;
margin-left: 5px;
color: #fff;
} .header-nav-right ul li a {
color: #fff;
text-decoration: none; }
.user{
min-width:980px;
text-align: center;
margin: 0px;
padding: 0px;
position: relative;
}
.user-list{
width:470px;
height: 250px;
padding: 15px;
margin: 20px auto;
position: relative;
border: 1px solid #DBDBDB;
}
.user-list ul{
list-style: none;
width: %;
overflow: hidden;
height: 250px;
position: relative;
padding: 10px 0px;
margin: 0px;
}
.user-list ul li{
width: %;
list-style: none;
margin-bottom:15px;
}
.user-list ul li i{
color: red;
}
.user-list ul li label{
display: inline-block;
width:%;
text-align: right;
font-size:16px;
margin-right: 10px;
font-family: "微软雅黑"; }
.user-list ul li input{
display: inline-block;
border: 1px solid #DBDBDB;
border-radius:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius:4px;
height: 30px;
padding: 2px 5px;
vertical-align:middle;
}
.buttons{
width: %;
height:35px;
padding: 5px 10px;
position: absolute;
bottom: 40px;
left: 0px;
right: 0px;
}
.openbutton,.onbutton{
display: inline-block;
width: %;
}
.buttons button{
width: %;
color: #fff;
padding: 5px 10px;
background-color: #4CB0F9;
border: 1px solid #4CB0F9;
border-radius: 4px;
vertical-align: middle;
height: 35px;
line-height: 25px;
cursor:pointer;
}
#form2{
display: none;
}
</style>
</head>
<body>
<div class="header">
<div class="header-nav">
<div class="header-nav-left">
<h3>网站后台管理</h3>
</div>
<div class="header-nav-right">
<ul>
<li><span>欢迎到来到网站后台</span></li>
<li><a href="" onclick="window.location.reload()">主菜单</a></li>
<li><a href="">网站首页</a></li> <li><a href="Index.html">后台主页</a></li>
<li><a href="">内容管理</a></li>
<li><a href="">退出</a></li>
</ul>
</div>
</div>
</div>
<div class="user">
<div class="user-list">
<form id="form1" action="" method="post">
<ul>
<li><label>用户名</label><input type="text" name="username" id="username" placeholder="手机号码或邮箱"/></li>
<li><label>密码</label><input type="password" name="pass" id="pass" placeholder="6-15位密码" /></li>
<div class="buttons">
<a class="onbutton"><button type="submit" id="onsubmit">登录</button></a>
<a class="openbutton"><button type="submit" id="getform2">注册</button></a>
</div>
</ul>
</form>
<form id="form2" action="" method="post">
<ul>
<li><label>用户名</label><input type="text" name="username" id="getusername" placeholder="手机号码或邮箱"/><i>*</i></li>
<li><label>密码</label><input type="password" name="pass" id="getpass" placeholder="6-15位密码" /><i>*</i></li>
<div class="buttons">
<a class="getbutton"><button type="submit" id="getsubmit">提交注册信息</button></a>
<p>已有账号立即<a href="#" id="getform1">登录</a></p>
</div>
</ul>
</form>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".onbutton #onsubmit").on('click',function(){
var $username = $("#username").val(),
$pass = $("#pass").val();
if($username=='' || $pass==''){
alert("用户名及密码不能为空");
return false;
}else{
var datas={
username:$username,
pass:$pass
};
$.ajax({
url:'user.php',
type:'post',
dataType:'json',
data:datas,
success:function(result){
if(result=='nameerror'){
alert('用户名不存在');
}else if(result=="passerror"){
alert("密码错误");
}else{
window.location.href = 'http://www.sogou.com';//登录成功跳转
}
},
error:function(){
alert('false');
}
})
}return false;
})
$("#getsubmit").click(function(){
var $username = $("#getusername").val(),
$pass = $("#getpass").val();
if($username=='' || $pass==''){
alert("用户名及密码不能为空");
return false;
}else{
var datas={
username:$username,
pass:$pass
}
$.ajax({
url:'adduser.php',
type:'post',
data:datas,
dataType:'json',
success:function(reslut){
if(reslut=="repeat"){
alert("该用户名已存在");
}else if(reslut=='success'){
alert("注册成功");
//注册成功后立即切换至登录表单,并记住用户名及密码;
$("#form2").hide();
$("#form1").show();
$("#username").val($username);
$("#pass").val($pass);
}
else{
alert('false');
}
}
})
}return false;
})
})
</script>
<script type="text/javascript">
document.getElementById('getform2').onclick = function(){
document.getElementById('form1').style.display= 'none';
document.getElementById('form2').style.display= 'block';
return false;
}
document.getElementById('getform1').onclick = function(){
document.getElementById('form2').style.display= 'none';
document.getElementById('form1').style.display= 'block';
return false;
} </script>
</body>
</html>
以上是前端代码
下面贴后台代码 ，登录
<?php
@header("content-type:text/html;charset=utf8");
$conne = mysql_connect("localhost","root","root")or die("数据库用户名密码错误".@mysql_error());
$select =mysql_select_db("test",$conne);
$utf = mysql_query("set names utf8");
$username=$_REQUEST['username'];
$pass = $_REQUEST['pass'];
$arrays = array(array('one'=>'nameerror','two'=>'passerror'));
$sqlname = mysql_query("select count(*) from user where username= '$username'");
$row = mysql_fetch_row($sqlname);
$num = $row[0];
//查看用户是否存在
if(!$num){
echo json_encode($arrays[0]['one']);//不存在返回nameerror
}else{
$sqlpass = mysql_query("select pass from user where username='$username'");//返回一个句柄；
$passarray = mysql_fetch_row($sqlpass);//获得一个只有一行数据的数族
$passval = $passarray[0];//这里才是对应用户的密码
//判断该用户的密码是否正确
if($passval!=$pass){
echo json_encode($arrays[0]['two']);//不正确返回passerror
}
}
?>
注册
<?php
@header("content-type:text/html;charset=uft8");
$conne = mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error());
$select = mysql_select_db("test",$conne)or die("数据库用户名或密码错误".@mysql_error());
$utf = mysql_query("set names utf8");
$username= $_REQUEST['username'];
$pass = $_REQUEST['pass'];
$arrays = array(array("one"=>'repeat','two'=>'success'));
$sql = mysql_query("select count(*) from user where username='$username'");
$row = mysql_fetch_row($sql);
$num = $row[];
//判断用户名是否已经被注册了
if($num == ){
echo json_encode($arrays[]['one']);//被注册返回repeat
}else{
mysql_query("insert into user(username,pass) values('$username','$pass')");
echo json_encode($arrays[]['two']);
}
?>
php+ajax 登录注册页面的更多相关文章
- 登录注册页面html模版
登录注册页面html模版 地址:http://download.csdn.net/detail/xiaosongaixiaoqian/5432033
- /*用户登录注册页面输入框的设置*/<span>的使用
<!DOCTYPE html> /*用户登录注册页面输入框的设置*/ <html lang="en"> <head> <meta char ...
- node.js实现简单的登录注册页面
首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...
- php登录注册页面及加载
php注册界面 <h1>注册页面</h1> <form acti ...
- php做登录注册页面及加载
//SQL注入攻击 //1.过滤用户的输入 //2.使用预处理语句 //3.写代码的时候尽量避免 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- javaWeb登录注册页面
简单的登陆注册页面 1.配置JDBC驱动连接数据库 2. 配置struts2框架 3. 利用1 2完成登录页面, 注意做到不耦合,即servlet Api和控制器完全脱离) 4. 利用1 2 制作注册 ...
- HTML登录注册页面简单实现
github:传送门 , 码云: 传送门 效果参考: 登录页面,注册页面 使用了bootstrap,jQuery. 后端使用的CGI处理表单,存入MySQL数据库.(之后更新) 登录页面源码 < ...
- SpringBoot 拦截器--只允许进入登录注册页面，没登录不允许查看其它页面
SpringBoot注册登录(一):User表的设计点击打开链接 SpringBoot注册登录(二):注册---验证码kaptcha的实现点击打开链接 SpringBoot注册登录(三):注册--验证 ...
- Django内置form表单和ajax制作注册页面
settings.py import os # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_D ...
随机推荐
- Ubuntu 12.4 Apache2 安装教程
一.更新操作系统 sudo apt-get update && sudo apt-get upgrade 二.安装Apache及依赖 sudo apt-get install apac ...
- Linux cp (复制)命令简介
\cp -rf source1 source2 source3 .... directory cp (复制档案或目录) [root@linux ~]# cp [-adfilprsu] ...
- ODBC API简介
1. 数据类型: 通过SQLGetTypeInfo函数来获取ODBC 3.0支持的数据类型信息.由SQLGetTypeInfo返回的数据类型是数据源所支持的数据类型. SQLRETURN S ...
- make menuconfig error 解决方法记录
新建的一个虚拟机,发现make menuconfig 后会出错,查了一下是缺少一些库. 这个错误已经错了两次了,我不希望第三次出现了还想不起来,所以特此记录. # 错误信息: make[2]: *** ...
- 未备案域名打开国内服务器上的网站（绑定国外空间并判断url后跳转引用）
场景:由于域名没备案不能绑定国内服务器,通过先绑定国外空间,在空间着陆页判断当前url,打开不同的页面.页面上通过iframe引用国内服务器上的目标网站. 实现:未备案域名打开国内服务器上的网站. 国 ...
- 开源实时日志分析ELK平台部署
参考帖子: (1)自动化测试Web服务器性能autobench+httperf
- linux 用户创建、管理、权限分配
(1)su与sudo su:通过su可以在用户之间切换,如果超级权限用户root向普通或虚拟用户切换不需要密码,什么是权力?这就是!而普通用户切换到其它任何用户都需要密码验证: sudo: sudo扮 ...
- SQL Server服务器上需要导入Excel数据的必要条件
SQL Server服务器上需要导入Excel数据,必须安装2007 Office system 驱动程序:数据连接组件,或者Access2010的数据库引擎可再发行程序包,这样就不必在服务器上装Ex ...
- java 深入技术一
1. myeclipse和debug调试 1)myeclipse重命名 包和类,方法,字段的重命名 重构,refactor-rename 方法,右键refactor-rename,按回车就重命名 Al ...
- 自己总结SVN必知点
1.只有添加或删除文件,才与xcodeproj文件有关 2.本地新建文件,为未知文件,符号为问号?,添加文件先add为A文件后,再commit 3.删除文件为叹号,右键删除为D,删除本 ...