博主最近在维护更新YHOST云平台时,为了整合新采用的layUI框架,而对一些功能设置进行改动兼容。

layUI框架是一个十分不错的前端框架,具体可以前往https://www.layui.com查看

 

在整合登录注册这块时,我发现layUI演示文档中采用的是ajax方法进行交互登录,我也就突发奇想的折腾起ajax

在参考网上各大文档、Demo和layUI本身的模块后成功实现Ajax交互

下面附带简易例子:

 
login.php文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Ajax登录</title>
        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
                        帐号:<input type="text" id="name" />
        <br><br>
                        密码:<input type="password" id="password" />
        <br />
        <input type="button" value="登录" id="btnlogin" />
		<div id="msg"></div>
    
    <script type="text/javascript">
        $(function(){
            $("#btnlogin").click(function(){
            //几个参数需要注意一下
                $.ajax({
                    type:"post",//请求类型
                    url:"ajax.php",//url
                    data:{account:$("#account").val(),password:$("#password").val()},//在html页面id=account、id=password的标签里获取数据内容
                    dataType:"json",//预期服务器返回的数据类型
                    success:function(data){
                        if(data.type==1){
                            alert("登录成功");
                        }else{
                            alert("登录失败");
                        }
                    },
                    error:function(){
                        alert("请求异常");
                    }
                });
            });
        });
        </script>
    </body>
</html>

 
ajax.php文件

<?php
header("Content-Type:text/html; charset=utf-8");
$account = $_POST['account'];
$password = $_POST['password'];
$result = array();
if ($account != '' && $password != '') {
    //$row = $db->query("SELECT * FROM account where user = '".$account."' and password = '".$password."'");
    $row = true;//这里去查数据库,假设这里返回true
    if($row){
        $result['type'] = 1;
        $result['msg'] = '登录成功';
    }else{
        $result['type'] = 0;
        $result['msg'] = '用户名或密码不正确';
    }
} else {
    $result['type'] = 0;
    $result['msg'] = '参数传输不正确';
}
echo json_encode($result);//输出json格式
?>