先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗

可以通过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做登陆和注册的更多相关文章

  1. 本博文将一步步带领你实现抽屉官网的各种功能:包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...

  2. 用AJAX实现页面登陆以及注册用户名验证

     AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.        AJAX 是一种用于创建快 ...

  3. 使用ajax 做注册登录示例,

    需求:使用AJAX 做一个注册登录示例, 如用户名已存在, 在填写用户名时给与提示. 1:首先创建一个新的django项目.做好配置 在settings.py文件里做好数据库配置: 1. 告诉Djan ...

  4. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  5. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  7. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  8. vue 做登陆页面 ( 登陆成功后去掉注册和登陆按钮 显示用户名)

    1.当登陆成功  显示用户名且去掉登陆和注册按钮 2.data里声明  后  就在登陆的方法里调用啦 下面说一下登陆的方法. 1.登陆的按钮代码在第一张图片里 2.登陆的弹出框 3.方法 ps:另一种 ...

  9. php实现微信扫码自动登陆与注册功能

    本文实例讲述了php实现微信扫码自动登陆与注册功能.分享给大家供大家参考,具体如下: 微信开发已经是现在程序员必须要掌握的一项基本的技术了,其实做过微信开发的都知道微信接口非常的强大做起来也非常的简单 ...

随机推荐

  1. ASP.NET Aries 入门开发教程1:框架下载与运行

    背景: 鉴于框架的使用者越来越多,文档太少,不少用户反映框架的入门门槛太高. 好吧,再辛苦下,抽时间写教程吧! 步骤1:下载框架源码 开源地址:https://github.com/cyq1162/A ...

  2. Hello Web API系列教程——Web API与国际化

    软件国际化是在软件设计和文档开发过程中,使得功能和代码设计能处理多种语言和文化习俗,在创建不同语言版本时,不需要重新设计源程序代码的软件工程方法.这在很多成熟的软件开发平台中非常常见.对于.net开发 ...

  3. java基础_集合List与Set接口

    List接口继承了Collection的方法  当然也有自己特有的方法向指定位置添加元素   add(索引,添加的元素); 移除指定索引的元素   remove(索引) 修改指定索引的元素   set ...

  4. Python标准模块--ContextManager

    1 模块简介 在数年前,Python 2.5 加入了一个非常特殊的关键字,就是with.with语句允许开发者创建上下文管理器.什么是上下文管理器?上下文管理器就是允许你可以自动地开始和结束一些事情. ...

  5. .NET平台开源项目速览(17)FluentConsole让你的控制台酷起来

    从该系列的第一篇文章 .NET平台开源项目速览(1)SharpConfig配置文件读写组件 开始,不知不觉已经到第17篇了.每一次我们都是介绍一个小巧甚至微不足道的.NET平台的开源软件,或者学习,或 ...

  6. Android数据加密之MD5加密

    前言: 项目中无论是密码的存储或者说判断文件是否是同一文件,都会用到MD5算法,今天来总结一下MD5加密算法. 什么是MD5加密? MD5英文全称“Message-Digest Algorithm 5 ...

  7. Web APi之认证(Authentication)两种实现方式【二】(十三)

    前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...

  8. Lambda

    Lambda Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 lambda 表达式,可作为参数传递或作为函数调用值返回的本地函数. Lambda 表达式对于编写 LI ...

  9. Create a Team in RHEL7

    SOLUTION VERIFIED September 13 2016 KB2620131 Environment Red Hat Enterprise Linux 7 NetworkManager ...

  10. js 入门级常见问题

    写在前面:以下是个人总结的关于js常见的入门级的问题一些总结. js是有 ECMAScript Dom Bom 三部分组成. 1,undefined,NaN,Null,infinity 1) unde ...