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. 跨域 CORS 详解 (转)

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  2. DNS域名解析之正向解析

    DNS域名解析之正向解析 1.DNS介绍 2.DNS正向解析实验 1.DNS定义:DNS是"域名系统"的英文缩写.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地 ...

  3. Kubernetes GitOps 工具

    Kubernetes GitOps Tools 译自:Kubernetes GitOps Tools 本文很好地介绍了GitOps,并给出了当下比较热门的GitOps工具. 简介 在本文中,将回顾一下 ...

  4. linux_14

    简述CGI与FASTCGI区别 编译安装基于fastcgi模式的多虚拟主机的wordpress和discuz的LAMP架构 通过loganalyzer展示数据库中的日志

  5. netty系列之:不用怀疑,netty中的ByteBuf就是比JAVA中的好用

    目录 简介 ByteBuf和ByteBuffer的可扩展性 不同的使用方法 性能上的不同 总结 简介 netty作为一个优秀的的NIO框架,被广泛应用于各种服务器和框架中.同样是NIO,netty所依 ...

  6. Solution -「LOCAL」充电

    \(\mathcal{Description}\)   给定 \(n,m,p\),求序列 \(\{a_n\}\) 的数量,满足 \((\forall i\in[1,n])(a_i\in[1,m])\l ...

  7. 01 MySQL数据库安装（Windows+Mac）

    目录 MySQL数据库安装 Windows 1.主要版本简介 2.软件下载 3.文件目录简介 4.使用 4.1配置环境变量 4.2登录 制作MySQL服务端开机自启动 运行MySQL 4.3 密码修改 ...

  8. [LeetCode]21.合并两个有序链表（Java）

    原题地址: merge-two-sorted-lists 题目描述: 将两个升序链表合并为一个新的 升序 链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例 1: 输入:l1 = [1 ...

  9. node(s) didn‘t match node selector.

    k8s集群中,有pod出现了 Pending ,通过 kubectl describe pod 命令,发现了如下报错 0/4 nodes are available: 1 node(s) had ta ...

  10. suse 12 二进制部署 Kubernetets 1.19.7 - 第06章 - 部署kube-apiserver组件

    文章目录 1.6.部署kube-apiserver 1.6.0.创建kubernetes证书和私钥 1.6.1.生成kubernetes证书和私钥 1.6.2.创建metrics-server证书和私 ...