ajax + php 登陆功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34518793/article/details/78488590

不会写作文，不废话，不矫情，上代码：

HTML部分：

<div class="login">
    <p class="log-err">&nbsp;</p>
    <input type="text" name="user_name" placeholder="用户名" />
    <input type="password" name="user_pass" placeholder="密码" />
    <button class="submit">登陆</button>
</div>

JS部分，本文使用JQ：

var _input = $(".login-main").find("input");
//获取输入内容
var username = _input.eq(0).val();
var userpass = _input.eq(1).val();
//执行ajax
$.ajax({
    type: "post",
    url: "login.php",
    data: "au_name=" + username + "&" + "au_pass=" + userpass,
    //请求执行前的操作
    beforeSend: function(){
        $(".submit").text("正在登陆...");
    },
    //执行成功回调函数，接收后台返回值
    success: function(data){ 
        if(data){
            //返回用户昵称，生成cookie并跳转
            $.cookie('im_au', data);
            window.location.href = "../";
        }else{
            //返回false，提示登陆失败
            $(".log-err").text("*用户名或密码错误！");
                _input.eq(i).val("");
            }
            vcode();
            $(".submit").text("登陆");
        }
    }
});

PHP部分：

<?php
    //获取post数据
    $au_name = $_POST['au_name'];
    $au_pass = $_POST['au_pass'];
    //执行sql查询
    $sql = "SELECT * FROM im_au where au_name = '$au_name' and au_pass = '$au_pass'";
    $res = $mysqli -> query($sql);
    //查询到记录返回用户昵称，否则返回false
    if($res -> fetch_array()){
        echo $res['au_nick'];
    }else{
        echo false;
    }
    mysqli_close($mysqli);
?>

新手学习笔记，不足支出欢迎补充，欢迎大神指点！
原文地址：http://blog.xuxiangbo.com/im-23.html