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

可以通过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. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. 1.初始Windows Server 2012 R2 Hyper-V + 系统安装详细

    干啥的?现在企业服务器都是分开的,比如图片服务器,数据库服务器,redis服务器等等,或多或少一个网站都会用到多个服务器,而服务器的成本很高,要是动不动采购几十台,公司绝对吃不消的,于是虚拟化技术出来 ...

  3. 逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])

    常用技能:http://www.cnblogs.com/dunitian/p/4822808.html#skill 逆天博客:http://dnt.dkil.net 逆天通用水印扩展篇~新增剪贴板系列 ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

    系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...

  5. vmware上网的方式

    vmware上网设置 vmware虚拟机上网设置 我的一些心得,如下: 如何使vmware虚拟机中的操作系统能够上网? 第一种情况: 主机使用PPPOE拨号上网 方法一:NAT方式 1.先关闭虚拟机中 ...

  6. EC笔记:第4部分:20、传递引用代替传值

    考虑以下场景: #include <iostream> #include <string> using namespace std; struct Person { strin ...

  7. java中的内部类

    /** * 内部类 ?? * 定义在一个内部的类,被称为内部类. * 内部类里有类体,方法体 * 内部类所在的类,被称为外部类. * --------------------------------- ...

  8. iOS从零开始学习直播之3.美颜

      任何一款直播软件都必须进行美颜,不然哪来的那么多美女,所以技术改变世界,不只是说说而已.美颜在采集的时候就得就行,让主播实时看到直播的效果. 1.美颜原理   其实美颜的本质就是美白和磨皮,分别通 ...

  9. grep 查找bash脚本中的注释代码

    出于安全性的考虑,不建议在bash脚本中注释掉不使用的代码.也就是说如果某段代码不使用了,那么应该删除掉,而不是简单地注释掉.假如你突然意识到这一点,而以前并没有遵从这个原则,现在需要找出脚本中的注释 ...

  10. Linux实战教学笔记01:计算机硬件组成与基本原理

    标签(空格分隔): Linux实战教学笔记 第1章 如何学习Linux 要想学好任何一门学问,不仅要眼睛看,耳朵听,还要动手记,勤思考,多交流甚至尝试着去教会别人. 第2章 服务器 2.1 运维的基本 ...