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. (DDS)正弦波形发生器——幅值、频率、相位可调(二)

    (DDS)正弦波形发生器--幅值.频率.相位可调(二) 主要关于调相方面 一.项目任务: 设计一个幅值.频率.相位均可调的正弦波发生器. 频率每次增加10kHz 相位每次增加 PI/2 幅值每次增加两 ...

  2. 线性结构和非线性结构、稀疏数组、队列、链表（LinkedList）

    一.线性结构和非线性结构 线性结构: 1)线性绪构作为最常用的数据结构,其特点是数据元素之间存在一对一的线性关系 2)线性结构有两种不同的存储结构,即顺序存储结构和链式存储结构.顺序存储的线性表称为顺 ...

  3. Codeforces Round #756 (Div. 3)

    本场战绩:+451 题目如下: A. Make Even time limit per test 1 second memory limit per test 256 megabytes input ...

  4. Spring-BeanFactory体系介绍

    1 BeanFactory介绍 BeanFactory是Spring中的根容器接口,所有的容器都从从它继承而来,ApplicationContext中对于BeanDefinition的注册,bean实 ...

  5. Netty高级应用及聊天室实战

    Netty 高级应用 1. 编解码器 概念:在网络应用中,需要实现某种编解码器.将原始字节数据与自定义消息数据进行相互转换.网络中都是以字节码的形式传输的. 对Netty而言,编解码器由两部分组成:编 ...

  6. mysql，数据类型与表操作

    一.mysql基本认知 创建用户 create host aa identified with mysql_native_password by ''; 修改用户权限 alter user root@ ...

  7. 前端生成PDF，让后端刮目相看

    PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公 ...

  8. MHA + Maxscale 数据库的高可用和读写分离

    MySQL 常见发行版本 MySQL 标准化.自动化部署 深入浅出MySQL备份与恢复 深入理解MySQL主从复制 MySQL构架设计与容量规划 MHA Maxscale MySQL 常见发行版本 M ...

  9. prometheus监控java项目（jvm等）：k8s外、k8s内

    前言 虽然可以使用jvisualvm之类的工具监控java项目,但是集群环境下,还是捉襟见肘,下面介绍如何用主流的prometheus来监控java项目. java项目配置 在pom.xml中添加依赖 ...

  10. [编译器]dev c++单步调试

    一.dev c++调试崩溃的解决方案 1.点击"工具 -> 编译选项". 2.选择"编译器"选项卡,勾选"编译时加入以下命令",输入& ...