文档章节

使用Ajax完成登录验证

QT2015
 QT2015
发布于 2015/12/09 13:22
字数 440
阅读 67
收藏 3
点赞 0
评论 0

最近做了几个项目,都是用Ajax进行前后台交互的,交互的数据都是json格式的。虽然Ajax的全称是Asynchronous JavaScript And XML,即异步JavaScript和XML,但是因为json作为数据交换格式不仅比XML简单而且网络传输数据量更小,所以逐渐取代了Ajax中XML的地位。下面就以最近做的一个登录验证为例向大家展示一下交互过程:

1、首先是HTML代码:调用check( )方法进行验证

 <div class="form-signin" role="form" >
  <input type="text" class="form-control" id="userName" placeholder="用户名" required autofocus />
  <input type="password" class="form-control" id="passWord" placeholder="密码" required />
  <button class="btn btn-lg btn-warning btn-block" onclick="check()">登录</button>
 </div>

2、其次是JS代码:

2.1、获得用户名和密码的value值

2.2、通过Ajax用post方式提交给URL:http://120.24.215.101:8288/Home/admin/login.do

2.3、提交的数据为data:'adminName='+userName+'&adminPassword='+passWord

2.4、http://120.24.215.101:8288/Home/admin/login.do返回的数据为

{"retMsg":null,"code":0,"data":null}

其中retMsg一般不用管;code为判定结果,一般1代表true,0代表false,具体情况由后台决定;data为后台返回的数据,这里仅作登陆判定,不需要后台返回数据,故返回null。

2.5、调用请求成功后的回调函数success( ),后台对提交的数据进行判断,如果成功重定向到后台管理页面,失败则弹出警告框。

function check() {
    var userName=$('#userName')[0].value;
    console.log(userName);
    var passWord=$('#passWord')[0].value;
    console.log(passWord);
    $.ajax({
        type:'POST',
        url:'http://120.24.215.101:8288/Home/admin/login.do',
        data:'adminName='+userName+'&adminPassword='+passWord,
        success:function(data){
            if(data.code==1){
                window.location.href = "./admin.html";
            }else{
                alert("账号或密码错误,请重新输入!");
            }
        }
    });      
}
注意:JS代码使用了jQuery库,使用前要先引入jQuery库。

© 著作权归作者所有

共有 人打赏支持
QT2015
粉丝 8
博文 17
码字总数 9810
作品 0
广州
SpringBoot集成Spring Security(4)——自定义表单登录

通过前面三篇文章,应该大致了解了Spring Security的流程。你应该发现了,真正的登录请求是由Spring Security帮我们处理的,那么我们如何实现自定义表单登录呢,比如添加一个验证码… 源码地...

yuanlaijike ⋅ 05/09 ⋅ 0

【代码实现】PHP生成各种随机验证码

文章来源:PHP开发学习门户 (自行开发的个人网站) 验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录、论坛恶意灌水等。本文将通过实例讲解使用PHP生成各种常见...

PHP开发学习门户 ⋅ 2014/10/07 ⋅ 0

cpcx/good-manage

平台简介 Good权限管理系统是作者学习springBoot时基于springBoot开发的一套轻量级的权限系统,其目的是形成一套属于自己的通用的开发框架 以后来项目的时候就可以直接基于此平台进行开发,减...

cpcx ⋅ 2017/05/10 ⋅ 0

HBuilder 入门(5) 编写一个登录页面 - Ajax交互

使用AJAX方式,页面不会因为刷新而现实大白页。 交互这部分可以分成两个部分:服务器端和客户端。 服务端以Java语言为例子(因为我只做过Java的)。其实 c#或者php等语言实现起来也都是基本一...

chenzl0723 ⋅ 2017/12/13 ⋅ 0

原来可以这样玩 SSO

1 什么是 SSO? 今天我问老婆:你知道 SSO 吗?她给了两个字:求救! 哎!她说的应该是 SOS,她不搞 IT,不知者无罪。但对于我们而言,如果还不知道 SSO 是什么,那真应该赶紧去百度一下了。...

黄勇 ⋅ 2014/02/11 ⋅ 16

Ajax请求session超时处理流程(DWZ)

名人名言:问题不在于告诉他一个真理,而在于教他怎样去发现真理。——卢梭 DWZ-Java框架Ajax请求session超时处理思路: 1)SessionValidateFilter统一验证session是否超时 2)SessionValida...

GIFCOOL ⋅ 2012/10/19 ⋅ 0

李炎恢PHP第4季视频教程 微博项目实战

--------------------课程目录-------------------- 01.ThinkPHP--为什么要学习框架[1].avi 02.ThinkPHP--安装与配置[2].avi 03.ThinkPHP--模块化和URL模式[3].avi 04.ThinkPHP--模型初步[上......

15543764942 ⋅ 05/19 ⋅ 0

php热身2:CRUD with Ajax

这次热身是一个会员管理系统,包括会员注册、登录、资料修改功能,使用ajax技术 1.建表 2.数据库连接类 书上没用PDO。但是pdo的封装,因为pdo函数用的不多,没啥经验,就先放放,只搞一个fet...

lovedan ⋅ 2016/05/15 ⋅ 0

ajax登录权限系统后,再次请求session为空问题。

各位同仁好: 遇见一个看上去比较菜的问题,还望大家不吝赐教。 我们本身有一个SSH框架的系统,当然是需要登录验证的那种,有拦截器。 现在需要用手机端访问后台调用数据,这样我考虑使用了a...

包子不热 ⋅ 2016/03/18 ⋅ 1

请问网站后台该如何有效的利用cookie呢?

我最近在做一个网站,登录使用cookie本地浏览器记录,我在网站后台是否需要对于cookie进行验证呢?是不是每个页面都需要将cookie传到后台,然后后台进行相关验证这么做是不是太麻烦了啊。 我...

电脑小童 ⋅ 2015/10/19 ⋅ 9

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 50分钟前 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 今天 ⋅ 0

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 今天 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 今天 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部