Ajax实现带有验证码的局部刷新登录界面-js教程-PHP中文网

首页

web前端

js教程

Ajax实现带有验证码的局部刷新登录界面

韦小宝

May 14, 2018 pm 03:17 PM

ajax 局部验证

很多登录界面都有验证码功能ajax局部刷新效果，接下来通过本文给大家分享ajax实现带有验证码的局部刷新登录界面，对ajax感兴趣的朋友一起看看吧

现在的登录界面大多数都带有：验证码的功能+验证码局部刷新+ajax登录。用ajax登录的好处最明显就是速度快，URL地址没有变化。所有现在登录功能很少再用form表单post提交了，大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面。理论还是要拿来实践才能验证的，下面直接上代码。

运行界面：

1.验证码后台访问部分上一篇博客已经介绍多了，这里介绍如何利用img中src实现局部刷新验证码的功能。

html部分：

<p><label class="lbright">验证码：</label>
<span>
<input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/>
<img id="codePic" src="http://127.0.0.1:8888/TP/codePic" width="60" height="21" style="vertical-align:middle;cursor:pointer;"/> 
</span> 
<a class="blurry" id="newPic" onclick="getPic();">看不清楚，换一张</a>
</p>

登录后复制

js部分：

<script type="text/javascript">
function getPic(){ 
$("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); 
};
</script>

登录后复制

这部分最重要的就是 $("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); 这部分的代码。如果不加flag="+Math.random()是实现不了局部刷新的功能的。因为src中如果每次访问的地址一样的话就会发生不更新的情况。具体为什么会发生这种情况大家可以自己去研究。而codePic其实是一个action。这个action的功能是利用java画笔画出验证码并打包成图片返回给img中的src。

2.利用bootstrap中的modal实现对话框的功能。因为登录提交前需要验证用户名或密码是否为空等判断，如果出现错误就需要弹出对话框提示用户。这里验证部分用js实现，对话框部分用bootstrap的modal实现。

html对话框部分：

<p class="modal" id="mymodal" tabindex="-1">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">亲，您好</h4>
</p>
<p class="modal-body" id="dialogs">
<p></p>
</p>
<p class="modal-footer">
<button type="button" data-dismiss="modal" style="color: #FFFFFF;background-color:#FB8F02; text-align:center;
padding:10px;border: 1px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;">我知道了
</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal-dialog -->
</p><!-- /.modal -->

登录后复制

js验证部分：

<script type="text/javascript">
function dialog(){ 
$("#mymodal").modal("toggle");
};
function login(){ 
var userName=document.getElementById("username").value; 
var pwd=document.getElementById("password").value; 
var validcode=document.getElementById("validcode").value; 
var matchResult=true; 
if(userName==""){ 
document.getElementById("dialogs").innerHTML="<h3>用户账号不能为空！</h3>";
dialog();
matchResult=false; 
}else if(pwd==""){ 
document.getElementById("dialogs").innerHTML="<h3>用户密码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(validcode==""){ 
document.getElementById("dialogs").innerHTML="<h3>验证码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
document.getElementById("dialogs").innerHTML="<h3>用户名长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false; 
}else if(pwd.length<6||pwd.length>20){ 
document.getElementById("dialogs").innerHTML="<h3>密码或重复密码长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false; 
} 
};
</script>

登录后复制

需要导入的css、js文件：

<link href="css/global.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src=&#39;js/jquery-1.9.1.js&#39;></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

登录后复制

这里需要注意的就是导入的CSS，js文件是否正确。

3.利用ajax实现登录功能

html部分：

<p class="submitcon">
<input type="button" value="登 录" style="height:45px;width:130px;margin-top:15px;color: #FFFFFF;background-color:#FB8F02;font-size: 20px;
padding:5px;border: 3px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;text-align:center;" onclick="login();"/> 
</p>

登录后复制

js部分：

<script type="text/javascript">
function login(){ 
var userName=document.getElementById("username").value; 
var pwd=document.getElementById("password").value; 
var validcode=document.getElementById("validcode").value; 
var matchResult=true; 
if(userName==""){ 
document.getElementById("dialogs").innerHTML="<h3>用户账号不能为空！</h3>";
dialog();
matchResult=false; 
}else if(pwd==""){ 
document.getElementById("dialogs").innerHTML="<h3>用户密码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(validcode==""){ 
document.getElementById("dialogs").innerHTML="<h3>验证码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
document.getElementById("dialogs").innerHTML="<h3>用户名长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false; 
}else if(pwd.length<6||pwd.length>20){ 
document.getElementById("dialogs").innerHTML="<h3>密码或重复密码长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false; 
} 
if(matchResult==true){
$.post("http://127.0.0.1:8888/TP/usersAction?method=login", {usersName:userName,password:pwd, validcode:validcode},function(data,status){
var error=data.error;
var result=data.result; 
getPic();
if(error=="error"){
errors="true";
document.getElementById("dialogs").innerHTML="<h3>验证码错误，请重新输入！</h3>";
dialog();
}
if(result=="0"){
document.getElementById("dialogs").innerHTML="<h3>您输入的用户名不存在！</h3>";
document.getElementById("username").value="";
dialog();
}else if(result=="1"){
document.getElementById("dialogs").innerHTML="<h3>您输入的密码错误，请重新输入！</h3>";
document.getElementById("password").value="";
dialog();
}else if(result=="2"){
document.getElementById("dialogs").innerHTML="<h3>您的管理员权限不够！</h3>";
dialog();
}else if(result=="3"){
location.href="http://127.0.0.1:8888/TP/main.jsp";
} 
},"json");
} 
};
</script>

登录后复制

这里location.href="http://127.0.0.1:8888/TP/main.jsp"作用相当于重定向。我的ajax不是原生的js中的ajax而是JQuery封装好的ajax。大家可以去搜一搜 JQuery中$.post（）请求。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



无标题文档

<link href="css/global.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src=&#39;js/jquery-1.9.1.js&#39;></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>


<p class="modal" id="mymodal" tabindex="-1">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">亲，您好</h4>
</p>
<p class="modal-body" id="dialogs">
<p></p>
</p>
<p class="modal-footer">
<button type="button" data-dismiss="modal" style="color: #FFFFFF;background-color:#FB8F02; text-align:center;
padding:10px;border: 1px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;">我知道了
</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal-dialog -->
</p><!-- /.modal -->

大学二手交易平台管理系统


BBW综合管理系统
 
用户名：


密 码：

<p><label class="lbright">验证码：</label>
<span>
<input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/>
<img id="codePic" src="http://127.0.0.1:8888/TP/codePic" width="60" height="21" style="vertical-align:middle;cursor:pointer;"/> 
</span> 
<a class="blurry" id="newPic" onclick="getPic();">看不清楚，换一张</a>
</p> 

<p class="submitcon">
<input type="button" value="登 录" style="height:45px;width:130px;margin-top:15px;color: #FFFFFF;background-color:#FB8F02;font-size: 20px;
padding:5px;border: 3px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;text-align:center;" onclick="login();"/> 
</p>


Copyright 2015-2016 林志强 版权所有

登录后复制

以上所述是小编给大家介绍的Ajax实现带有验证码的局部刷新登录界面，希望对大家有所帮助！！

相关推荐：

ajax登录跳转登录实现

JQuery ajax局部刷新实例

jquery弹出窗口+ajax局部提示,该怎么处理

以上是Ajax实现带有验证码的局部刷新登录界面的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7514

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何在PDF中验证签名 Feb 18, 2024 pm 05:33 PM

我们通常接收到政府或其他机构发送的PDF文件，有些文件带有数字签名。验证签名后，我们会看到SignatureValid消息和一个绿色勾号。如果签名未验证，会显示有效性未知。验证签名很重要，下面看看如何在PDF中进行验证。如何在PDF中验证签名验证PDF格式的签名使其更可信，文档更容易被接受。您可以通过以下方式验证PDF文档中的签名。在AdobeReader中打开PDF右键单击签名，然后选择显示签名属性单击显示签名者证书按钮从“信任”选项卡将签名添加到“受信任的证书”列表中单击验证签名以完成验证让

微信好友辅助验证进行解封的详细方法 Mar 25, 2024 pm 01:26 PM

1、打开微信进入后，点击搜索图标，输入微信团队，点击下方的服务进入。2、进入后，点击左下方的自助工具的选项。3、点击后，在上方的选项内，点击解封/申诉辅助验证的选项。

解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资

PHP 8 新特性：增加了验证和签名 Mar 27, 2024 am 08:21 AM

PHP8是PHP的最新版本，为程序员带来了更多的便利和功能。这个版本特别关注安全性和性能，其中一个值得注意的新特性是增加了验证和签名功能。在本文中，我们将深入了解这些新的功能及其用途。验证和签名是计算机科学中非常重要的安全概念。它们通常用于确保传输的数据是完整和真实的。在处理在线交易和敏感信息时，验证和签名变得尤为重要，因为如果有人能够篡改数据，可能会对

解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误

如何使用Ajax从PHP方法中获取变量？ Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：

如何解决jQuery AJAX报错403的问题？ Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使