结合之前学的知识，可以用ajax来传递数据，实现页面不用刷新，仅数据刷新，来看一下ajax是怎么来实现页面免刷新的

方的是客户端，圆的是服务器

如果没有ajax的话，客户端直接把数据传给服务器，服务器再解析数据，把数据传回客户端，客户端要刷新页面才能显示

如果用ajax的话，就多了个处理页面，在客户端的代码部分还会有脚本语言，由js把数据传给处理页面，处理页面再传给服务器，服务器解析后再返回处理页面，处理页面返给js，最后由js更改要变动的数据，并不会刷新页面

先来举个简单的例子

html部分

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="../Jquery/jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="text" id="uid" />

<span id="tishi"></span>

</body>
js部分

<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>

ajax部分是用js来完成的，而它的处理页面是通过php代码来完成的

在上面的代码中有一个trim()方法，这个方法是用来去除前后空格的，避免处理页面因为有空格而出错

再来看一下它的处理页面，也就是"testchuli.php" 页面

 <?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[0][0]>0)

{

    echo "NO";

}

else

{

    echo "OK";

}

上面那就sql语句的意思是，根据传过来的用户名，来查询这张表的数量

来看一下运行的结果

输入数据库内已有的用户名

会显示该用户名已存在

再改一下

用户名可以用

然后再来用ajax做登录页面

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<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:"logincl.php",

                data:{u:uid,p:pwd},

                type:"POST",

                dataType:"TEXT",

                success: function(data){

                        if(data.trim()=="OK")

                        {

                            window.location.href="test.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[0][0]==$pwd)

{

    echo "OK";

}

else

{

    echo "NO";

}

运行后来看看

这个账号和密码是不对的，点击登陆看一下它会有什么反应

会提示错误

再来改个对的

点击登陆

然后页面就会跳转了

转到上面写的那个网址，证明登陆成功了

ajax 做登录 实现页面免刷新的更多相关文章

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

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

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

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

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

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

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

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

  5. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  6. 11.10 （上午）开课二个月零六天（ajax基础，ajax做登录）

    test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  7. php做登录注册页面及加载

    //SQL注入攻击 //1.过滤用户的输入 //2.使用预处理语句 //3.写代码的时候尽量避免 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  8. 带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验

    今日内容 使用JQuery完成页面定时弹出广告 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果 使用JQuery完成省市联动效果 使用JQuery完成下列列表左右选择 使用J ...

  9. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

随机推荐

  1. HTML5学习笔记四：html5结构

    一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...

  2. QT移植

    QT下载地址:http://download.qt.io/archive/qt/1.编译tslib(touch screen lib) 准备工作:确保以下工具安装完成 sudo apt-get ins ...

  3. Mac下启动MySQL出现错误“the /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' user”解决

    错误如下: Warring the /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' user 这应该是某 ...

  4. HDU-2060-Snooker

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2060 题意: 给你场上剩下的球数m , 和 a ,b 两名队员目前得分,现在假设a将 所有的球m都打入 ...

  5. localToLocal坐标变换

    localToLocal坐标变换 $(function() { init(); }); // localtoLocal var stage, arm, handler; function init(e ...

  6. 小兔JS教程（五） 简单易懂的JSON入门

    上一节的参考答案: http://xiaotublog.com/demo.html?path=homework/04/index2 本节重点来介绍一下JSON,JSON(JavaScript Obje ...

  7. Spring Boot踩坑之路一

    Takes an opinionated view of building production-ready Spring applications. Spring Boot favors conve ...

  8. 微信小程序教程（第二篇）

    如何注册接入小程序及搭建开发环境 小程序接入流程 注册 主要分为注册邮箱与信息登记. 需要重新申请一个新的微信公众帐号,不能使用服务号.订阅号或企业号使用的公众帐号 (微信公众帐号分为四种类型:订阅号 ...

  9. MongoDB复制集之将现有的单节点服务器转换为复制集

    服务器情况:   现有的单节点 Primary     192.168.126.9:27017   新增的节点    Secondry  192.168.126.8:27017    仲裁节点     ...

  10. sqlcmd命令导入大容量的SQL本地文件至SQL server 2008

    由于开发工作在测试环境,需要构造测试数据,经常遇到100+M大小的*.sql文件需要导入到测试库的情况,由于SSMS里对导入文件的大小有限制: 会出现上图的报错!上网查了下,超过80M的文件是不能在S ...