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. AT2645 [ARC076D] Exhausted?

    解法一 引理:令一个二分图两部分别为 \(X, Y(|X| \le |Y|)\),若其存在完美匹配当且仅当 \(\forall S \subseteq X, f(S) \ge |S|\)(其中 \(f ...

  2. Linux发行版·常见Linux系统下载

    本专题页汇总最受欢迎的Linux发行版基本介绍和下载地址,如果您是一位刚接触Linux的新手,这里的介绍可能对您有所帮助,如果您是以为Linux使用前辈,也可以在评论处留下您宝贵意见和经验,以便让更多 ...

  3. Ansible之roles模块--lnmp分布式部署

    Ansible之roles模块--lnmp分布式部署 目录 Ansible之roles模块--lnmp分布式部署 1. role模块的作用 2. roles的目录结构 3. roles内个目录含义解释 ...

  4. java 监听redis事件

    第一步:利用RDM等redis连接工具查看相应事件,然后去网上搜索 一下,会有redis各种事件的说明,选择契合业务的事件: 第二步:创建监听处理类: 1 package com.lechuang.a ...

  5. P2678 [NOIP2015 提高组] 跳石头

    #include<bits/stdc++.h> using namespace std; int l,n,m,a[100010];//与起点的距离 bool check(int d) { ...

  6. VC709E 基于FMC接口的FPGA XC7VX690T PCIeX8 接口卡

    一.板卡概述 本板卡基于Xilinx公司的FPGA XC7VX690T-FFG1761 芯片,支持PCIeX8.两组 64bit DDR3容量8GByte,HPC的FMC连接器,板卡支持各种FMC子卡 ...

  7. [LeetCode]4.寻找两个正序数组的中位数（Java）

    原题地址: median-of-two-sorted-arrays 题目描述: 示例 1: 输入:nums1 = [1,3], nums2 = [2] 输出:2.00000 解释:合并数组 = [1, ...

  8. python好用的函数或对象

    1.ljust.rjust "hello".ljust(10,"x") #将字符串hello做对齐,并且用字符'x'补到10个字符 #输出为:helloxxxx ...

  9. 防世界之Web_NewsCenter

    题目:  打开实验环境一看,就一个搜索框,emmm试下有没有SQL注入点,SQL注入步骤传送门https://www.cnblogs.com/shacker/p/15917173.html 爆出数据, ...

  10. windows下安装skywalking8.6.0（用于本地开发调试代码）

    安装jdk https://www.cnblogs.com/uncleyong/p/10732951.html 下载.安装.配置skywalking 下载 地址:https://skywalking. ...