文档章节

使用Ajax完成登录验证

QT2015
 QT2015
发布于 2015/12/09 13:22
字数 440
阅读 90
收藏 3

最近做了几个项目,都是用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
0
【代码实现】PHP生成各种随机验证码

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

PHP开发学习门户
2014/10/07
0
0
cpcx/good-manage

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

cpcx
2017/05/10
0
0
HBuilder 入门(5) 编写一个登录页面 - Ajax交互

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

chenzl0723
2017/12/13
0
0
李炎恢PHP第4季视频教程 微博项目实战

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

15543764942
05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell-日志脚本小实验

1.查找日志2018-8-15,求得那一分钟访问量最大。 #/bin/bash#from cc#2018-8-15#2018-08-15.log 哪一分钟 访问量 最大for d in `ls /data/nginx/logs/`doif [ -a 2018-08-15...

chencheng-linux
昨天
0
0
Android中的设计模式之状态模式

参考 《设计模式:可复用面向对象软件的基础 》5.8 State 状态 对象行为型模式 《Android源码设计模式解析与实战》第7章 随遇而安--状态模式 意图 允许一个对象在其内部状态改变时改变它的行...

newtrek
昨天
0
0
xshell端 vim没有颜色

说明 使用xshell连接服务器的时候,使用vim打开文档没有颜色 解决方法: 1.在更目录home或者etc下找到vim的配置文件vimrc 2.vim打开它找个坑,添加下面这个东西 set t_Co=256 3.保存退出,就...

杉下
昨天
0
0
spring 资料

spring boot http://www.ityouknow.com/springboot/2016/01/06/spring-boot-quick-start.html

zaolonglei
昨天
2
0
TypeScript基础入门 - 函数 - 简介

转载 TypeScript基础入门 - 函数 - 简介 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.1.6 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接...

durban
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部