登陆界面ajax实例应用

Posted 2020-06-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了登陆界面ajax实例应用相关的知识，希望对你有一定的参考价值。

建立mydbda数据库封装类

<?php
    class mydbda
    {
        var $host = "localhost";
        var $username = "root";
        var $password = "123";
        var $database = "mydb";
        
        /**
            功能：执行SQL语句，返回结果
            参数：$sql:要执行的SQL语句
                 $type：SQL语句的类型，CX代表查询，QT代表其他
                 $data:要操作的数据库
            返回值：如果是查询，返回结果集
                  如果是其他语句，执行成功返回OK，失败返回NO
        */
        function Select($sql,$type,$data)
        {
            
            //1.造连接对象
            $db = new mysqli($this->host,$this->username,$this->password,$data);
            
            //2.判断是否连接成功
            if(mysqli_connect_error())
            {    
                echo "连接失败";
                
                //退出整个程序
                exit;
            }
            else
            {
                //4.执行SQL语句
                
                $result = $db->query($sql);
                
                if($type == "CX")
                {
                    $str = "";
                    
                    while($row = $result->fetch_row())
                    {
                        for($i=0;$i<count($row);$i++)
                        {
                            $str=$str.$row[$i]."^";
                        }
                        $str = substr($str,0,strlen($str)-1);
                        $str = $str."|";
                        
                    }
                    $str = substr($str,0,strlen($str)-1);
                    return $str;
                }
                else
                {
                    if($result)
                    {
                        return "OK";
                    }
                    else
                    {
                        return "NO";
                    }
                }
                
        
            }
        }

        
    
    }
?>

处理界面源代码

chuli.php

<?php
include("mydbda.php");
/*$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
//1.造连接对象
$db = new mysqli("localhost","root","123","mydb");
            
//2.判断是否连接成功
if(mysqli_connect_error())
{    
    echo "连接失败";
    
    //退出整个程序
    exit;
}
else
{
    $sql = "select count(*) from login where UserName=‘".$uid."‘ and Password=‘".$pwd."‘";
    
    $result = $db->query($sql);
    
    $row = $result->fetch_row();
    
    if($row[0]==0)
    {
        echo "用户名或密码错误";
    }
    else
    {
        echo "OK";
    }
}*/

$uid = $_POST["uid"];

$db = new mydbda();
$sql = "select count(*) from login where UserName=‘".$uid."‘";

$str = $db->Select($sql,"CX","mydb");

echo $str;
?>

主界面源代码

testajax.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" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>
<h1>登录界面</h1>
<div>用户名：<input type="text" id="uid"/></div>
<div>密码：<input type="text" id="pwd"/></div>
<div><input type="button" id="btn" value="登录"/></div>
<br />
用户名：
<input type="text" id="uidz"/>
<div style="color:red" id="xs"></div>
</body>

<script type="text/javascript">
$(document).ready(function(e) {
    
    $("#uidz").blur(function(){
            var uid = $(this).val();
            $.ajax({
                
                url:"chuli.php",
                data:{uid:uid},
                dataType:"TEXT",
                type:"POST",
                success: function(data){
                        if(data=="1")
                        {
                            $("#xs").text("该用户名已经存在！");
                        }
                        else
                        {
                            $("#xs").text("");
                        }
                    
                    }
                
                });
        
        
        })
    
    
    $("#btn").click(function(){
        
            var uid = $("#uid").val();
            var pwd = $("#pwd").val();
            
            
            $.ajax({
                
                    url:"chuli.php",
                    data:{uid:uid,pwd:pwd},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data){
                        
                            if(data == "OK")
                            {
                                window.location = "index.php";
                            }
                            else
                            {
                                alert(data);
                            }
                        
                        }
                
                });
        
        
        })
    
    
});
</script>

</html>

以上是关于登陆界面ajax实例应用的主要内容，如果未能解决你的问题，请参考以下文章

WEB应用程序开发---实践开发(MySQL+JavaJDBC+Ajax+JavaScript+Jquery)

用户登陆界面AJAX

（转）博客园登陆__JSEncrypt 分析

用java写一个登陆界面代码。

ajax常用实例代码总结参考