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 ...
随机推荐
- HTML兼容问题——HACK技术
有话先说:本文的目的主要是向大家描述一下我们在遇见IE8版本一下以及Firefox兼容的问题. 针对不同的浏览器写不同的CSS的过程,这就叫CSS hack,也叫写CSS hack,相信您会对一些比较 ...
- 利用 autoconf 和 automake 生成 Makefile 文件
一.相关概念的介绍 什么是 Makefile?怎么书写 Makefile?竟然有工具可以自动生成 Makefile?怎么生成啊?开始的时候,我有这么多疑问,所以,必须得先把基本的概念搞个清楚. 1.M ...
- Linux进程间通信（九）：数据报套接字 socket()、bind()、sendto()、recvfrom()、close()
前一篇文章,Linux进程间通信——使用流套接字介绍了一些有关socket(套接字)的一些基本内容,并讲解了流套接字的使用,这篇文章将会给大家讲讲,数据报套接字的使用. 一.简单回顾——什么是数据报套 ...
- .NET读取Excel数据，提示错误：未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序
解决.NET读取Excel数据时,提示错误:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序的操作: 1. 检查本机是否安装Office Access,如果未安装去去h ...
- 听说awk语言也可以编写脚本
导读 从 awk 系列开始,我们都是在命令行或者脚本文件里写一些简短的 awk 命令和程序.然而 awk 和 shell 一样也是一个解释型语言.通过从开始到现在的一系列的学习,你现在能写可以执行的 ...
- GET和POST可传递的值到底有多大？
前日,看到这个问题了. 没有深入了解.我的常识里面get最大传递的值为256b,post 是2M.这是很久以前不知在哪看到的.于是又百度一下.看到两篇文章装过来看看: 浅谈 HTTP中Get与Post ...
- MapReduce的核心资料索引 [转]
转自http://prinx.blog.163.com/blog/static/190115275201211128513868/和http://www.cnblogs.com/jie46583173 ...
- RobotFrameWork（四）变量运算与Evaluate
一.特殊变量运算: 执行结果: 二.Evaluate使用 函数释义:Evaluate是执行Python表达式,并返回执行结果 示例1: 执行结果: 示例2: 执行结果:
- ASM:《X86汇编语言-从实模式到保护模式》第16章：Intel处理器的分页机制和动态页面分配
第16章讲的是分页机制和动态页面分配的问题,说实话这个一开始接触是会把人绕晕的,但是这个的确太重要了,有了分页机制内存管理就变得很简单,而且能直接实现平坦模式. ★PART1:Intel X86基础分 ...
- 前端 js 发送验证码
1. 代码如下: <html> <head> <meta charset="utf-8"> <title></title> ...