调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用，看一下有没有已经存在的用户名吗
可以通过ajax提示一下
$("#uid").blur(function(){
//取用户名
var uid = $(this).val();
//查数据库，调ajax
$.ajax({
url:"testchuli.php",//处理页面的地址
data:{u:uid},//要传递的数据
type:"POST",//提交方式
dataType:"TEXT",//返回数据的格式
success:function(data){//当处理页面执行成功之后过来调用的方法 ，回调函数，自动的
var str = "";
if(data.trim()=="OK")
{
str = "该用户名可用";
$("#tishi").css("color","green");
}
else
{
str = "该用户名已存在";
$("#tishi").css("color","red");
}
$("#tishi").text(str);
}
});
})
若果有了就显示用户名已存在 用红字显示
如果没有就用绿颜色的字来显示该用户名可用
做登录界面
我们也用ajax调用提示一下，连接到登录处理页面
<?php
include("../fengzhuang/dbda.class.php");
$db = new dbda();
$uid = $_POST["u"];
$pwd = $_POST["p"]; $sql= "select pwd from users where uid='{$uid}'";
$attr = $db->query($sql);
if(!empty($pwd) && !empty($attr) && $attr[][]==$pwd)
{
echo"OK";
}
else
{
echo"NO";
}
然后处理完毕后
在执行ajax的 红色标记的
$("#btn").click(function(){
//取用户名和密码
var uid = $("#uid").val();
var pwd = $("#pwd").val();
//调ajax
$.ajax({
url:"dengluchuli.php",//连接到处理页面
data:{u:uid,p:pwd},
type:"POST",
dataType:"TEXT",
success: function(data){
if(data.trim()=="OK")
{
window.location.href="ajiakesi.php"; //执行成功后转到的网页
}
else
{
alert ("用户名或密码错误");
}
}
});
})
执行失败后有提示
检查有没有已存在用户名的代码
<script src="../jquery/jquery-1.11.2.min.js"></script>
</head> <body> <input type="text" id="uid"/>
<span id="tishi"></span>
</body>
<script type="text/javascript">
$("#uid").blur(function(){
//取用户名
var uid = $(this).val();
//查数据库，调ajax
$.ajax({
url:"testchuli.php",//处理页面的地址
data:{u:uid},//要传递的数据
type:"POST",//提交方式
dataType:"TEXT",//返回数据的格式
success:function(data){//当处理页面执行成功之后过来调用的方法 ，回调函数，自动的
var str = "";
if(data.trim()=="OK")
{
str = "该用户名可用";
$("#tishi").css("color","green");
} else
{
str = "该用户名已存在";
$("#tishi").css("color","red"); } $("#tishi").text(str); }
}); }) </script>
封装类
<?php
class dbda
{
public $host="localhost";
public $uid="root";
public $pwd="";
public $dbname="asdadads"; //成员方法
public function query($sql,$type=)
{
$db= new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$r=$db->query($sql);
if($type==)
{
return $r->fetch_all();
}
else
{
return $r;
}
}
}
检查的处理页面
<?php
include("../fengzhuang/dbda.class.php");
$db = new dbda(); $uid = $_POST["u"];
$sql= "select count(*) from users where uid='{$uid}'"; $attr = $db->query($sql);
if($attr[][]>)
{
echo"NO";
}
else
{
echo"OK";
}
登录页面的检测
<script src="../jquery/jquery-1.11.2.min.js"></script>
</head> <body>
<div>
账号：<input type="text" id="uid" />
</div>
<div>
密码：<input type="password" id="pwd" />
</div>
<input type="button" value="登陆" id="btn" />
</body>
<script type="text/javascript">
$("#btn").click(function(){
//取用户名和密码
var uid = $("#uid").val();
var pwd = $("#pwd").val();
//调ajax
$.ajax({
url:"dengluchuli.php",
data:{u:uid,p:pwd},
type:"POST",
dataType:"TEXT",
success: function(data){
if(data.trim()=="OK")
{
window.location.href="ajiakesi.php"; }
else
{
alert ("用户名或密码错误");
} } });
}) </script>
登录的处理页面
<?php
include("../fengzhuang/dbda.class.php");
$db = new dbda();
$uid = $_POST["u"];
$pwd = $_POST["p"]; $sql= "select pwd from users where uid='{$uid}'";
$attr = $db->query($sql);
if(!empty($pwd) && !empty($attr) && $attr[][]==$pwd)
{
echo"OK";
}
else
{
echo"NO";
}
调用AJAX做登陆和注册的更多相关文章
- 本博文将一步步带领你实现抽屉官网的各种功能：包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...
- 用AJAX实现页面登陆以及注册用户名验证
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX 是一种用于创建快 ...
- 使用ajax 做注册登录示例，
需求:使用AJAX 做一个注册登录示例, 如用户名已存在, 在填写用户名时给与提示. 1:首先创建一个新的django项目.做好配置 在settings.py文件里做好数据库配置: 1. 告诉Djan ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- vue 做登陆页面 （ 登陆成功后去掉注册和登陆按钮 显示用户名）
1.当登陆成功 显示用户名且去掉登陆和注册按钮 2.data里声明 后 就在登陆的方法里调用啦 下面说一下登陆的方法. 1.登陆的按钮代码在第一张图片里 2.登陆的弹出框 3.方法 ps:另一种 ...
- php实现微信扫码自动登陆与注册功能
本文实例讲述了php实现微信扫码自动登陆与注册功能.分享给大家供大家参考,具体如下: 微信开发已经是现在程序员必须要掌握的一项基本的技术了,其实做过微信开发的都知道微信接口非常的强大做起来也非常的简单 ...
随机推荐
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- 几个比较”有意思“的JS脚本
1.获取内网和公网真实IP地址(引用地址) <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- css3中perspective
perspective 属性定义 3D 元素距视图的距离,以像素计.该属性允许改变 3D 元素查看 3D 元素的视图.当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本 ...
- console的高级使用
1.console.table()用来表格化展示数据. var people = { zqz: { name: 'zhaoqize', age: 'guess?' }, wdx: { name: 'w ...
- Android注解使用之通过annotationProcessor注解生成代码实现自己的ButterKnife框架
前言: Annotation注解在Android的开发中的使用越来越普遍,例如EventBus.ButterKnife.Dagger2等,之前使用注解的时候需要利用反射机制势必影响到运行效率及性能,直 ...
- TFS 测试用例步骤数据统计
TFS系统集成了一套BI系统,基于SQL Server的Analysis Service进行实现的.通过这几年的深入使用,能够感触到这个数据数据仓库模型是多么的优秀,和微软官方提供的数据仓库示例Adv ...
- servlet 简介,待完善
什么是Servlet?① Servlet就是JAVA 类② Servlet是一个继承HttpServlet类的类③ 这个在服务器端运行,用以处理客户端的请求 Servlet相关包的介绍--javax. ...
- Nexus（一）环境搭建
昨天,成功搭建了自己的 Maven 环境(详见:Maven(一)环境搭建),今天就来研究和探讨下 Nexus 的搭建! 使用背景: 安装环境:Windows 10 -64位 JDK版本:1.7 Mav ...
- windows 7（32/64位）GHO安装指南（U盘引导篇）~
上一篇我们说了怎么制作U盘启动盘,那么这一篇让我们来看看如何进行正确的U盘引导启动. 现在的个人计算机一般分为台式机和笔记本,由于各厂商的喜好不同(开玩笑的啦),所以对于主板的BIOS设置各所不同.进 ...