Java教程

ajax 无刷新页面登录

本文主要是介绍ajax 无刷新页面登录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1：页面代码

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div style="width: 300px">
    <div class="form-group">
           <label for="name">名称</label>
        <input type="text" class="form-control account" name="account"   >
    </div>
    <div class="form-group">
        <label for="name">密码</label>
        <input type="password" class="form-control password" name="password"   >
    </div>
    <input type="hidden" name="__token__" value="{$Request.token}" />
    <input type="button"  id="login" value="立即登录">
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $('#login').click(function (){
        var account =$('.account').val();
        var password=$('.password').val();
        $.ajax({
            url:'/ajax/ajax/save',
            type:'POST',
            data:{
                account:account,
                password:password,
                __token__:"{$Request.token}",
            },
            dataType:'json',
            success:function (res){
                // console.log(res)
          if (res.code==200){
              alert('登录成功');
              //将用户res里的Token存入在本地
              localStorage.setItem('token','res.data.token')
              location.href='/ajax/ajax/index';
          }
            }
        })

    })




</script>

2：控制器代码

 

 

 

<?php

namespace app\ajax\controller;

use app\ajax\model\AjaxModel;
use think\Controller;
use think\Request;
use think\Session;
use think\View;
use tools\jwt\Token;

class Ajax extends Controller
{
    /**
     * 显示资源列表
     *
     * @return \think\Response
     */
    public function index()
    {
        //展示登录后首页
    return \view();
    }

    /**
     * 显示创建资源表单页.
     *
     * @return \think\Response
     */
    public function create()
    {
        //展示登录页面
        return view();
    }

    /**
     * 保存新建的资源
     *
     * @param \think\Request $request
     * @return \think\Response
     */
    public function save(Request $request)
    {
        //
        $params = $this->request->post();
        //验证user表是否与用户输入的信息向匹配
        $data = AjaxModel::getLogininfo($params);
        if ($params['account'] != $data['username']) {
            $this->error('账号输入错误', '/ajax/ajax/create');
        }
        if ($params['password'] != $data['userpassword']) {
            $this->error('密码输入错误', '/ajax/ajax/create');
        }
     return json(['node'=>200,'massage'=>'success','data'=>$data]);
      
    }

3：模型代码

<?php

namespace app\ajax\model;

use think\Model;

class AjaxModel extends Model
{
    //查询user用户表
    protected $table = 'user';

    public static function getLogininfo($params)
    {
        return self::where('username', $params['account'])->find();
    }
}

 

这篇关于ajax 无刷新页面登录的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航