结合之前学的知识，可以用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. OpenSceneGraph几个重要功能节点练习

    OpenSceneGraph几个重要功能节点练习 一. 空间变换节点 空间变换中最重要的是坐标系和矩阵运算了.OSG坐标系中使用右手系,Z轴垂直向上,X轴水平向右,Y轴垂直屏幕向里,与OpenGL和D ...

  2. volatile的理解和使用

    package thread; /** * Created by Administrator on 2017/1/15. */ public class Counter { public volati ...

  3. 把C#对象变成数组技术---索引器（indexer）

    public class IndexerDemo { IList list = new List(); public IndexerDemo() { list.Add("); list.Ad ...

  4. 使用spring的JavaMailSender发送邮件

    一:pom.xml <!-- java邮件 -->      <dependency>          <groupId>javax.mail</group ...

  5. 关于Cookie中不过滤“=”号的方法

    近来做关于Cookie的加解密工作时遇到一个问题:当用cookie.getValue()方法获取Cookie的值时,结果遇到"="号时就会自动截断,后面的值就取不到了.这是因为Ja ...

  6. python属性查找（attribute lookup）

    在Python中,属性查找(attribute lookup)是比较复杂的,特别是涉及到描述符descriptor的时候.     在上一文章末尾,给出了一段代码,就涉及到descriptor与att ...

  7. CentOS 6.5下NFS安装配置

    [root@local /]# yum -y install nfs-utils rpcbind3.创建共享目录:[root@local /]# mkdir /sharestore4.NFS共享文件路 ...

  8. 微信小程序之快速接入七牛云

    小程序为什么要接入云? 目前,开发者在开发小程序过程中,主要遇到以下几个问题: 小程序发布大小超限 微信官方限制小程序的发布代码不能超过 1MB,而在实际开发过程中,一般的小程序难免会有图片等富媒体文 ...

  9. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  10. 蓝桥网试题 java 基础练习 查找整数

    --------------------------------------------------------------------- 注意看清楚条件 别漏了 -1 -1 -1 --------- ...