结合之前学的知识，可以用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. php 禁用eval( )函数

    php的eval函数并不是系统组件函数,因此我们在php.ini中使用disable_functions是无法禁止它的. 但是eval()对于php安全来说具有很大的杀伤力,因此一般不用的情况下为了防 ...

  2. YII 1.0 扩展第三方类

    扩展缩略图类在blog\protected\extensions 中建立 Image/CThumb.php 1. 自己瞎弄的,一点都不优雅 include_once Yii::app()->Ba ...

  3. Eclipse 使用说明

    2. 使用技巧 2.1. Eclipse 打开文件所在文件夹 2.2. Mac 安装Eclipse 2.3. Eclipse 安装插件 2.4. Eclipse 工具栏不见了 2.5. Eclipse ...

  4. 数据契约（DataContract）的作用

    服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型. 一旦声明一个类型为DataContract,那么该类型就可以被序列化在服务端和客户端之间传送,如下所 ...

  5. java中数组的排序,直接排序，冒泡排序，插入排序

    1.直接排序: public static void selectSort(int[] arr) { for (int x = 0; x < arr.length - 1; x++) { for ...

  6. ［译］如何定义python源文件的文件编码

    简介 这篇文章是为了介绍定义python源文件文件编码的方法.python解释器可以根据所指定的编码信息对当前文件进行解析.通常来说,这种方法可以提高解析器对Unicode编码的源文件的识别,并且支持 ...

  7. 新手初学Redis之基础知识命令

    笔者最初接触Redis是因为了解了一些nosql方面的知识,觉得nosql是一个很有意思的方面.像其中的mongodb,redis等等.当初也没有深入的去了解Redis,直到自己前段时间在写一个web ...

  8. 微信小程序----关于变量对象data 和 前端wxml取后台js变量值

    (一)页面变量对象data 对象data 有两个方面用途 第一,前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的 第二,定义JS页面中的页面局部变量,使其整个页面中可使用或调用 对象d ...

  9. IO的构造方法

    package com.file; /* File的构造方法: File(String pathname); File(File parent,String child); File(String p ...

  10. nagios安装及监控Linux主机

    服务端的操作:##################################安装lamp环境及依赖包##########################   24  rpm -ivh gd-de ...