文档章节

使用Ajax完成登录验证

QT2015
 QT2015
发布于 2015/12/09 13:22
字数 440
阅读 144
收藏 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
请问网站后台该如何有效的利用cookie呢?

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

电脑小童
2015/10/19
479
9

没有更多内容

加载失败,请刷新页面

加载更多

Java GC机制详解

垃圾收集 Garbage Collection 通常被称为“GC”,本文详细讲述Java垃圾回收机制。 导读: 1、什么是GC 2、GC常用算法 3、垃圾收集器 4、finalize()方法详解 5、总结--根据GC原理来优化代码 ...

小刀爱编程
17分钟前
1
0
ORACEL学习--理解over()函数

二、理解over()函数 1.1、两个order by的执行时机 分析函数是在整个sql查询结束后(sql语句中的order by的执行比较特殊)再进行的操作, 也就是说sql语句中的order by也会影响分析函数的执行结果...

spinachgit
19分钟前
1
0
抽象语法树

import asttree = ast.parse('def hello_word(): print("hello world!")')def hell_word(): print(1)print(ast.dump(tree)) 语法树 可以基于这个实现另外一种编程语言...

colin_86
20分钟前
1
0
Akka查询设备组《fourteen》译

加入以下依赖到项目中: 介绍: 到目前为止,我们看到的会话模式很简单,因为它们要求Actor保持很少或没有状态。 特别: 设备actor返回一个读数,不需要更改状态。 记录温度,更新单个字段。...

woshixin
27分钟前
1
0
wait、notify、notifyAll 的用法

wait()、notify()、notifyAll()是三个定义在Object类里的方法,用来控制线程的状态。这三个方法最终调用的都是jvm的native方法, 随着jvm运行平台的不同可能有些许差异。 wait(): 使持有该对...

noob_fly
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部