Php+Json+Ajax+jQuery无刷新异步弹出层登录教程(附源码）

文章目录[隐藏]

弹出层登陆效果预览：
首先引入Bootsrtap及相关的css,js文件
html代码
jQuery和ajax操作
login.php验证

弹出层用来登陆和注册时目前各大网站流行的方式，当用户输入正确的信息后弹出层消失，提高了用户的体验，还可以把它改造成弹出层注册页面，搜索页面等等，这个实例用了Bootstrap框架，引入了相关的jquery,css,和字体文件，这里给出大体思路和代码，网页后面提供了百度云盘源码下载。

弹出层登陆效果预览：

首先引入Bootsrtap及相关的css,js文件

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/popupwindow.css">

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>

<script src="js/jquery.popupwindow.js"></script>

html代码

首先设置一个弹出登陆按钮，这里主要使用了Bootstrap的UI，然后是表单的设置，#hw-layer-login是弹出层内容，默认是不可见的，它包含了一个登录表单。

<div class="optlist" style="text-align:center;margin:250px auto 0">

```
 
```

    <a href="#0" class="btn btn-danger btn-lg" id="form-btn" data-show-layer="hw-layer-login" role="button">点击弹出登录表单</a>

```
 
```
```
    <div id="result"></div>
```
```
</div>
```
```
 
```

<div class="hw-overlay" id="hw-layer-login">

```
    <div class="hw-layer-wrap">
```

        <button type="button" class="close popupwindow-close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <h3 class="hw-layer-title">用户登录</h3>

```
        <div class="row">
```

            <form class="form-horizontal" action="login.php" method="post" id="login-form">

                <div class="form-group">

                    <div class="input-group">

                        <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>

                        <input type="text" class="form-control" name="user" id="user" placeholder="请输入用户名">

```
                    </div>
```
```
                </div>
```

                <div class="form-group">

                    <div class="input-group">

                        <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>

                        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">

```
                    </div>
```
```
                </div>
```

                <div class="form-group">

                    <div class="col-md-11 col-md-offset-1">

                        <button type="submit" class="btn btn-success popupwindow-ok">登录</button>

                        <span id="msg">用户名：511yj.com，密码：123</span>

```
                    </div>
```
```
                </div>
```
```
            </form>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

jQuery和ajax操作

当我们点击登录按钮后先调用jquery.js，然后加载jquery.popupwindow.js，弹出登录层，填写好账号信息，点击登录后，表单提交给login.php，先要验证前端输入的合法性，这里只是简单的验证输入不能为空的情况。然后提交Ajax，将用户名和密码内容提交给后端login.php来处理。login.php它会验证我们填写的账号信息是否正确，并且将处理的结果以json格式返回给前端。那么当前端收到登录成功的信息时，将登录结果用户名和登录时间显示在主页面上，即实现了大家常说的局部刷新效果，同时应该关闭弹出层。

login.php验证

当然这里只在login.php做了一个用户名和密码的判断，实际操作起来我们应当去读取数据库和数据库的数据比较验证。

//获取AJAX提交过来的帐号（安全起见做了安全过滤）

$username = htmlspecialchars($_POST['username']);

```
 
```

//获取AJAX提交过来的密码（安全起见做了安全过滤）

$password = htmlspecialchars($_POST['password']);

```
 
```

//判断输入的帐号密码是否正确（一般这里是从数据库获取数据来与提交的数据进行对比）

if($username == 'sucainiu' && $password == '123456')

```
{
```

	//登录成功 返回code=1，logintime=时间为当前时间

	$arr = array("code"=>1,"logintime"=>date("Y-m-d H:i:s"));

```
}
```
```
else
```
```
{
```

	//登录失败 返回code=2，logintime=时间为当前时间

	$arr = array("code"=>2,"logintime"=>date("Y-m-d H:i:s"));

```
}
```

//将PHP数组转换成JSON格式数据，以便前台JS好接收返回值

```
echo json_encode($arr);
```

以上只是一个简单的思路和流程，在实际操作中我们还需要完善，希望对你有所启发和帮助。

百度云盘源码下载：http://pan.baidu.com/s/1boZWFmB

511遇见

不一样的遇见