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

可以通过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 Core应用的错误处理[3]：ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”

    DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMi ...

  2. ABP文档 - Hangfire 集成

    文档目录 本节内容: 简介 集成 Hangfire 面板授权 简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...

  3. [Nginx笔记]关于线上环境CLOSE_WAIT和TIME_WAIT过高

    运维的同学和Team里面的一个同学分别遇到过Nginx在线上环境使用中会遇到TIME_WAIT过高或者CLOSE_WAIT过高的状态 先从原因分析一下为什么,问题就迎刃而解了. 首先是TIME_WAI ...

  4. [原]分享一下我和MongoDB与Redis那些事

    缘起:来自于我在近期一个项目上遇到的问题,在Segmentfault上发表了提问 知识背景: 对不是很熟悉MongoDB和Redis的同学做一下介绍. 1.MongoDB数组查询:MongoDB自带L ...

  5. JavaScript基础知识总结（二）

    JavaScript语法 二.数据类型 程序把这些量.值分为几大类,每一类分别叫什么名称,有什么特点,就叫数据类型. 1.字符串(string) 字符串由零个或多个字符构成,字符包括字母,数字,标点符 ...

  6. Android中通过ActionBar为标题栏添加搜索以及分享视窗

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.Action ...

  7. Android中Activity的四大启动模式实验简述

    作为Android四大组件之一,Activity可以说是最基本也是最常见的组件,它提供了一个显示界面,从而实现与用户的交互,作为初学者,必须熟练掌握.今天我们就来通过实验演示,来帮助大家理解Activ ...

  8. linux常用命令(3)mkdir命令

    mkdir命令1 命令格式:mkdir [选项]目录名2 命令功能:通过 mkdir 命令可以实现在指定位置创建以 DirName(指定的文件名)命名的文件夹或目录.要创建文件夹或目录的用户必须对所创 ...

  9. 一步步开发自己的博客 .NET版（9、从model first替换成code first 问题记录）

    为什么要改用code first 用过code first的基本上都不会再想用回model first或是db first(谁用谁知道).不要问我为什么不一开始就直接使用code first,因为那个 ...

  10. 【腾讯Bugly干货分享】基于RxJava的一种MVP实现

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bfef673c1174283d60bac0 Dev Club 是一个交流移动 ...