1.ajax的基础知识

ajax是结合了jquery、php等几种技术延伸出来的综合运用的技术，不是新的内容。ajax也是写在<script>标签里面的。

如果使用ajax一定是要有1个处理页面的，处理页面只是操作数据库并且返回值，页面都是ajax处理的。

2.用ajax做登录页面　denglu.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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

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

</head>

<body>

<div>用户名：<input type="text" id="uid" /></div>

<div>密码：<input type="text" id="pwd" /></div>

<div><input type="button" value="登录" id="btn" /></div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(){//给按钮加点击事件

        //取用户名和密码

        var u = $("#uid").val();//取输入的用户名

        var p = $("#pwd").val();//取输入的密码

        //调ajax

        $.ajax({

            url:"dengluchuli.php",

            data:{u:u,p:p},//第二个u和p只是变量，可以随意写，dengluchuli.php里面的u和p都是第一个。

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                    if(data.trim()=="OK")//要加上去空格，防止内容里面有空格引起错误。

                    {

                        window.location.href="main.php";//js跳转页面，要记住。

                    }

                    else

                    {

                        echo("用户名或密码错误");

                    }

                }

            });

        })

});

</script>

</html>

登录的处理页面 dengluchuli.php

<?php

$uid = $_POST["u"];

$pwd = $_POST["p"];

include("./DBDA.class.php");

$db = new DBDA();

$sql = "select password from login where username='{$uid}'";

$mm = $db->StrQuery($sql,0);

if($mm == $pwd && $pwd!="")

{

    echo "OK";

}

else

{

    echo "NO";

}

3.用ajax验证用户名是否可用 testuid.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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

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

</head>

<body>

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

<span id="ts"></span>

</body>

<script type="text/javascript">

    $("#uid").blur(function(){//blur表示失去焦点时触发

        //取用户名

        var uid = $("#uid").val();

        //调ajax

        $.ajax({

            url:"uidchuli.php",

            data:{u:uid},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                    if(data>0)

                    {

                        $("#ts").html("该应户名已存在");

                        $("#ts").css("color","red");

                    }

                    else

                    {

                        $("#ts").html("该应户名可用");

                        $("#ts").css("color","green");

                    }

                }

            });

        })

</script>

</html>

处理页面 uidchuli.php

<?php

$uid = $_POST["u"];

include("./DBDA.class.php");

$db = new DBDA();

$sql = "select count(*) from login where username='{$uid}'";

echo $db->StrQuery($sql,0);

效果如图：

4.动态调用数据库，搜索框里输入关键字，内容中含关键字的自动出现在输入框下面。

list.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

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

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

</head>

<body>

<br />

<div>

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

</div>

<div id="list"></div>

</body>

<script type="text/javascript">

$("#name").keyup(function(){

    //取名称

    var n = $(this).val();

    if(n!="")

    {

        //调ajx

        $.ajax({

            url:"listchuli.php",

            data:{n:n},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                var sz = data.split("|");

                var str = "";

                for(var i=0;i<sz.length;i++)

                {

                    str = str+"<div class='l'>"+sz[i]+"</div>";

                }

                $("#list").html(str);

                }

            });

        }

        else

        {

            $("#list").html("");

        }

    })

</script>

</html>

处理页面 listchuli.php

<?php

$name = $_POST["n"];

include("./DBDA.class.php");

$db = new DBDA();

$sql = "select areaname from chinastates where areaname like'%{$name}%'";

echo $db->StrQuery($sql,0);

效果如图：

使用PHP中的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. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

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

  4. ajax 做登录 实现页面免刷新

    结合之前学的知识,可以用ajax来传递数据,实现页面不用刷新,仅数据刷新,来看一下ajax是怎么来实现页面免刷新的 方的是客户端,圆的是服务器 如果没有ajax的话,客户端直接把数据传给服务器,服务器 ...

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

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

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

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

  7. Nodejs：npm run build之后，dist\index.html页面在火狐中可以正常显示登录页面并登录成功，在Chrome中可以正常显示登录页面，登录失败

    问题描述:Nodejs:npm run build之后,dist\index.html页面在火狐中可以正常显示登录页面并登录成功,在Chrome中可以正常显示登录页面,登录失败 解决方法:将打包后的d ...

  8. JavaBean组件＜jsp:forward＞动作＜jsp:param＞动作登录页面输入用户名和密码，然后进入检查页面判断是否符合要求，符合要求跳转到成功界面，不符合要求返回登录界面，显示错误信息。

    JavaBean组件 JavaBean组件实际是一种java类.通过封装属性和方法成为具有某种功能或者处理某个业务的对象. 特点:1.实现代码的重复利用.2.容易编写和维护.3.jsp页面调用方便. ...

  9. ajax例子：审核验证用户名；登录界面

    审核验证用户名主页面: <body><div>用户名:<input type="text" id="uid" /><s ...

随机推荐

  1. jquery 选择器、筛选器、事件绑定与事件委派

    一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...

  2. 【Python 08】汇率兑换2.0-1（字符串索引）

     1.案例描述 设计一个汇率换算程序,其功能是将人民币转换为美元,或者美元转换为人民币. 增加功能:根据输入判断是人民币还是美元,进行相应的转换计算. 2.案例分析 3.字符串 两个双引号或单引号括起 ...

  3. 【Python 01】Python可以做什么

    Python学习未来方向: 1.数据分析 2.自然语言处理 3.社交网络分析 4.人工智能 5.深度学习 6.计算机视觉 7.网络爬虫 8.量化交易

  4. poj 3090 Visible Lattice Points（离线打表）

    这是好久之前做过的题,算是在考察欧拉函数的定义吧. 先把欧拉函数讲好:其实欧拉函数还是有很多解读的.emmm,最基础同时最重要的算是,¢(n)表示范围(1, n-1)中与n互质的数的个数 好了,我把规 ...

  5. TK2 USB修复

    https://www.jianshu.com/p/bb4587014349 开发板刷机过程全程联网 除了Jetson TX2之外,您还需要另一台带有Intel或AMD x86处理器的台式机或笔记本电 ...

  6. 数据采集工具Telegraf：简介及安装

    接着上一篇博客:InfluxDB简介及安装,这篇博客介绍下Linux环境下Telegraf安装以及其功能特点... 官网地址:influxdata 官方文档:telegraf文档 环境:CentOS7 ...

  7. 使用 xUnit 编写 ASP.NET Core 单元测试

    还记得 .NET Framework 的 ASP.NET WebForm 吗?那个年代如果要在 Web 层做单元测试简直就是灾难啊..NET Core 吸取教训,在设计上考虑到了可测试性,就连 ASP ...

  8. Daily Scrum 12.20

    Member Task on 12.20 Task on 12.21 仇栋民 继续Task972 : 完成活动评分基础功能 完成Task972 : 完成活动评分基础功能 康家华 完成 Task1010 ...

  9. [转帖]如何重置CentOS/RHEL 7中遗忘的根用户帐户密码

    如何重置CentOS/RHEL 7中遗忘的根用户帐户密码 https://www.cnblogs.com/swordxia/p/4389466.html 作者的blog质量很高呢 没看完 但是感觉 很 ...

  10. js 实现数据结构 -- 栈

    原文: 在 Javascript 中学习数据结构与算法. 概念: 栈是一种遵从先进后出 (LIFO) 原则的有序集合:新添加的或待删除的元素都保存在栈的末尾,称作栈顶,另一端为栈底.在栈里,新元素都靠 ...