结合之前学的知识，可以用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. iOS 视图调试器（Debug View Hierarchy） 之 初试牛刀

    参考:http://blog.csdn.net/th_gsb/article/details/44856795 由于iOS的界面开发大多都是用代码实现的,编写的时候,那就是看不见摸不着的情况.所以,如 ...

  2. Nginx中的信号量(信号控制)

  3. vue-cli 官方模板webpack-simple的npm run dev 与npm run bulid的一些问题

    npm run dev命令后并不会在dist目录下生成build.js文件,开发环境下build.js是在运行内存中的. 在package.json的scripts属性的dev后面加上--port 8 ...

  4. cocharan-Armitage trend test

    Cochran-Armitage trend test是我们常说的趋势卡方检验,一般是针对基因型的2*3列联表的.譬如说三种基因型,如果按照某一个allele来看,可以有0.1.2个拷贝,是有序的,我 ...

  5. matlab计算矩阵每列非0元素个数

    在统计分析中,有时候需要计算矩阵每列非0元素的个数,可以用以下方法: 先用find找到每列不为0的元素index,然后用count计数. 假设有矩阵A[M,N], 结果存在countZeros cou ...

  6. php常用图片处理类

    <?php /** * 已知问题:1.在图片缩放功能中,使用imagecreatetruecolor函数创建画布,并使用透明处理算法,但PNG格式的图片无法透明.用imagecreate函数创建 ...

  7. QT移植

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

  8. Java数据库连接--JDBC调用存储过程，事务管理和高级应用

    相关链接:Jdbc调用存储过程 一.JDBC常用的API深入详解及存储过程的调用 1.存储过程的介绍 我们常用的操作数据库语言SQL语句在执行的时候要先进行编译,然后执行,而存储过程是在大型数据库系统 ...

  9. Kingbase在初始化时遇到的错误

    FATAL: could not create semaphores: No space left on deviceDETAIL: Failed  system call was semget(58 ...

  10. PHP Memcached 实现简单数据库缓存

    Memcache常用方法 Memcache::add — 添加一个值,如果已经存在,则返回false Memcache::addServer — 添加一个可供使用的服务器地址 Memcache::cl ...