Ajax方法实现登录页面

时间：2024-08-28 11:05:44

Note:

ajax技术
不用刷新页面,做局部刷新
不用form表单,因为不需要提交,通过JQuery控制
必须要有id
如果要用ajax可以用JQuery也可以用js写,
推荐JQuery 因为简单,直接引入JQuery包
js和JQuery是不能操作数据库的,如果需要处理数据库还需要用php语言

JQuery中不能直接嵌php代码,所以需要创建一个新的页面来写php代码
JQuery里面就需要传递数据过去,提交到php页面处理

1.输入用户名,密码后点击登录.输入正确跳转页面,输入错误出现提示对话框

登录页面的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

</head>

<body>

<h1>登录</h1>

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

<div>密码:&nbsp;<input type="text" id="pwd" ></input></div>

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

</body><!--用JQuery写ajax jquery是不能直接处理数据库的-->

<script type="text/javascript">

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

        $("#btn").click(function(){

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

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

            $.ajax({

//必须要写的四个参数,顺序不限

                url:"cli.php",

                //处理页面的路径

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

                //传递的数据.提交数一般以json格式来写,key是自定义的,:后面的值 就是上面的值

                type:"POST",

                //数据的提交传递方式,GET,POST 最好用POST

                datatype:"TEXT",

                //返回值的类型,TEXT,JSON,XML三种类型可选

                success:function(data){

                //如果ajax执行成功,返回来调用success函数即回调函数,返回值以参数的形式返回

                if(data=="OK")

                {

                    window.location="Main.php";

                }

                else

                {

                    alert(data);

                }

                },

            });

        })

    });

</script>

</html>

处理页面的代码

<?php

//做ajax的处理页面,要顶格写<?php,不要空行,因为如果返回的是text,空一行的话,返回的结果不正确会带空格

include("DBDA.php");

$db = new DBDA();

$uid = $_POST["u"];//接收用户名

$pwd = $_POST["p"];//密码

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

$attr = $db->Query($sql);

if($attr[0][0]==0)

{

    echo "用户名密码不正确!";

}

else

{

    echo "OK";

}

2.输入用户名后判断是否存在

主页面代码

<!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" />

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

</head>

<body>

<div><input type="text" id="user" /><div id="ts"></div></div>

</body>

<script>

$("#user").blur(function(){

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

    $.ajax({

        url:"chuli.php",

        data:{u:uid},

        dataType:"TEXT",

        success: function(d){

        if(d=="OK")

        {

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

        }

        else

        {

            $("#ts").html("<span style='color:red'>该用户名已存在!</span>")

        }

        }

    })

    });

</script>

</html>

处理页面

<?php

include("DBDA.php");

$uid = $_POST["u"];

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

$attr = $db->Query($sql);

if($attr[0][0] == 0)

{

    echo "OK";

}

else

{

    echo "NO";

}

3.点击出现按钮,出现下拉菜单,处理时综合以上两种写到同一处理页面

查询页面

<!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" />

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

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

</head>

<body>

<div>

<select id="sel">

</select>

</div><br />

<input type="button" id="btn" value="出现" />

</body>

<script type="text/javascript">

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

    $("#btn").click(function(){

        $.ajax({

            url:"chuli.php",

            data:{type:2},

            type:"POST",

            datetype:"TEXT",

            success: function(data){

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

                var str = "";

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

                {

                    var lie = hang[i].split("^");

                    str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                }

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

                }

        })

        })

});

</script>

</html>

综合处理页面

<?php

$type = $_POST["type"];

include("../../DBDAajax.php");

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

$db = new DBDAajax();

switch($type)

{

    case 0:

            $uid = $_POST["u"];

            $pwd = $_POST["p"];    

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

            $attr = $db->Query($sql);

            if($attr[0][0] == 0)

            {

                echo "用户密码不正确!";

            }

            else

            {

                echo "OK";

            }

    break;

    case 1:

            $uid = $_POST["u"];

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

            $attr = $db->Query($sql);

            if($attr[0][0] == 0)

            {

                echo "OK";

            }

            else

            {

                echo "NO";

            }

    break;

    case 2:

            $sql = "select * from Nation";

            $attr = $db->Ajax($sql);

            echo $attr;

            //将数组拼成字符串

/*            $str = "";

            for($i=0;$i<count($attr);$i++)

            {

                for($j=0;$j<count($attr[$i]);$j++)

            {

                $str = $str.$attr[$i][$j];

                $str = $str."^";

            }

            $str = substr($str,0,strlen($str)-1);

            $str = $str."|";

            }

            $str = substr($str,0,strlen($str)-1);

            echo $str."<br>";

            */

    break;

}

相关文章