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 无刷新页面登录的更多相关文章

  1. 使用Ajax无刷新页面登录

    <script> window.onload = function () { var myname = document.getElementById("uname") ...

  2. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  3. 使用AJAX做关键字查询：输入框变化自动搜索、无刷新页面;

    使用AJAX做关键字查询要求:1.无刷新页面2.输入框变化自动搜索 <style type="text/css"> .k{ width:150px; height:30 ...

  4. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

  5. JSF中使用f:ajax标签无刷新页面改变数据

    ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...

  6. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  7. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  8. Ajax无刷新提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

随机推荐

  1. JS generator（生成器）

    笔记整理自:廖雪峰老师的JS教程 目录 简介 与函数的不同之处 函数写法 generator写法 generator调用 generator对象的`next()`方法调用 `for ... of`循环 ...

  2. Git简单多人协作

    感谢廖雪峰老师,引自他的Git教程. Git简单多人协作 首先,可以试图用git push origin <branch-name>推送自己的修改: 如果推送失败,则因为远程分支比你的本地 ...

  3. linux下格式化json文件数据

    一.使用 python -m json.tool cat test.json | python -m json.tool 二.jq格式化 在web 2.0时代json这种直观.灵活.高效数据格式基本已 ...

  4. 代理模式应用-AOP事务（转）

    https://jinnianshilongnian.iteye.com/blog/14872351.预备知识 aop概念请参考[http://www.iteye.com/topic/1122401] ...

  5. Android下数据库操作——增删改查

    Android下数据库第一种方式增删改查     1.创建一个帮助类的对象,调用getReadableDatabase方法,返回一个SqliteDatebase对象     2.使用SqliteDat ...

  6. LVS+Keepalived群集

    LVS+Keepalived群集 目录 LVS+Keepalived群集 一.Keepalived实现原理 1. 单服务器的风险 2. Keepalived工具 3. Keepalived解决单点故障 ...

  7. 浅谈Java面向对象之抽象类（abstract）

    java语言,声明类时格式为: abstract class Db{} 说明Db类为抽象类.抽象方法是说没有方法的实现(方法体)此方法为抽象方法,只有抽象类和接口中才可以有抽象方法.简而言之,含有抽象 ...

  8. PL/SQL批量执行SQL脚本文件

    1.选择File > New > Command Windows(命令窗口) 2.输入 @ 符号,之后敲击回车键.从本地选择执行的 SQL脚本 等待批量命令全部执行成功,关闭页面即可 新增 ...

  9. Elasticsearch笔记2

    1 搜索所有文档中还有某个字段的方法: localhost:9200/get-together/group/_search?pretty { "query": { "qu ...

  10. VLAN介绍及实验

    目录 一.VLAN 1.1.VLAN的概念及优势 1.2.VLAN的种类 1.3.静态VLAN的配置 1.4.Trunk的作用 1.5.配置实验 1.搭建拓扑图 2.交换机SW1配置情况 3.交换机S ...