文档章节

使用Ajax完成登录验证

QT2015
 QT2015
发布于 2015/12/09 13:22
字数 440
阅读 208
收藏 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
php热身2:CRUD with Ajax

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

lovedan
2016/05/15
0
0
请问网站后台该如何有效的利用cookie呢?

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

电脑小童
2015/10/19
495
9

没有更多内容

加载失败,请刷新页面

加载更多

为什么只有你每次提交代码,log里面会出现merge

http://www.cnblogs.com/Sinte-Beuve/p/9195018.html

踏破铁鞋无觅处
1分钟前
0
0
如何学习大数据:spark发布程序

一、对于spark程序只是用于默认的spark包的情况 直接点击pcakage 将程序进行在linux当中进行发布 客户端模式:测试 spark-submit --class com.keduox.App \ --master yarn \ --deploy-mode ...

架构师springboot
1分钟前
0
0
oracle job(定时任务)

创建 定时任务 job declare job number;BEGIN DBMS_JOB.SUBMIT( JOB => job, -- job任务的唯一标识(自动生成) WHAT => 'INSERT into TEXTL (id) VALUES(TEXT......

骑羊放狼灬
5分钟前
0
0
Spring声明式事务在抛出异常时不回滚(RollBack)

Spring声明式事务默认只在RuntimeException时Rollback(回滚),不当的try catch会导致事务不回滚。 spring事务默认运行时异常回滚,RuntimeException 配置时添加异常回滚 rollback-for="Th...

叶落花开
6分钟前
0
0
赋能时空云计算 阿里云数据库时空引擎Ganos上线

随着移动互联网、位置感知技术、对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业。从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像...

阿里云云栖社区
8分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部