咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

Ajax如何实现带有验证码的局部刷新登录界面-创新互联

这篇文章给大家分享的是有关Ajax如何实现带有验证码的局部刷新登录界面的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联专业为企业提供眉山网站建设、眉山做网站、眉山网站设计、眉山网站制作等企业网站建设、网页设计与制作、眉山企业网站模板建站服务，十多年眉山做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

运行界面：

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

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

html部分：

验证码：


 
 
看不清楚，换一张

js部分：


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

这部分最重要的就是 $("#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对话框部分：





×Close
亲，您好

我知道了

js验证部分：


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="
用户账号不能为空！
";
dialog();
matchResult=false; 
}else if(pwd==""){ 
document.getElementById("dialogs").innerHTML="
用户密码不能为空！
";
dialog();
matchResult=false; 
}else if(validcode==""){ 
document.getElementById("dialogs").innerHTML="
验证码不能为空！
";
dialog();
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
document.getElementById("dialogs").innerHTML="
用户名长度应在6到20个字符之间！
";
dialog();
matchResult=false; 
}else if(pwd.length<6||pwd.length>20){ 
document.getElementById("dialogs").innerHTML="
密码或重复密码长度应在6到20个字符之间！
";
dialog();
matchResult=false; 
} 
};

需要导入的css、js文件：

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

3.利用ajax实现登录功能

html部分：


 

js部分：


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="
用户账号不能为空！
";
dialog();
matchResult=false; 
}else if(pwd==""){ 
document.getElementById("dialogs").innerHTML="
用户密码不能为空！
";
dialog();
matchResult=false; 
}else if(validcode==""){ 
document.getElementById("dialogs").innerHTML="
验证码不能为空！
";
dialog();
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
document.getElementById("dialogs").innerHTML="
用户名长度应在6到20个字符之间！
";
dialog();
matchResult=false; 
}else if(pwd.length<6||pwd.length>20){ 
document.getElementById("dialogs").innerHTML="
密码或重复密码长度应在6到20个字符之间！
";
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="
验证码错误，请重新输入！
";
dialog();
}
if(result=="0"){
document.getElementById("dialogs").innerHTML="
您输入的用户名不存在！
";
document.getElementById("username").value="";
dialog();
}else if(result=="1"){
document.getElementById("dialogs").innerHTML="
您输入的密码错误，请重新输入！
";
document.getElementById("password").value="";
dialog();
}else if(result=="2"){
document.getElementById("dialogs").innerHTML="
您的管理员权限不够！
";
dialog();
}else if(result=="3"){
location.href="http://127.0.0.1:8888/TP/main.jsp";
} 
},"json");
} 
};

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

login.jsp全部代码：

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



无标题文档













×Close
亲，您好






我知道了






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


BBW综合管理系统
 

用户名：




密 码：



验证码：


 
 
看不清楚，换一张

 


 



Copyright 2015-2016 林志强 版权所有 



function getPic(){ 
$("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); 
};
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="
用户账号不能为空！
";
dialog();
matchResult=false; 
}else if(pwd==""){ 
document.getElementById("dialogs").innerHTML="
用户密码不能为空！
";
dialog();
matchResult=false; 
}else if(validcode==""){ 
document.getElementById("dialogs").innerHTML="
验证码不能为空！
";
dialog();
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
document.getElementById("dialogs").innerHTML="
用户名长度应在6到20个字符之间！
";
dialog();
matchResult=false; 
}else if(pwd.length<6||pwd.length>20){ 
document.getElementById("dialogs").innerHTML="
密码或重复密码长度应在6到20个字符之间！
";
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="
验证码错误，请重新输入！
";
dialog();
}
if(result=="0"){
document.getElementById("dialogs").innerHTML="
您输入的用户名不存在！
";
document.getElementById("username").value="";
dialog();
}else if(result=="1"){
document.getElementById("dialogs").innerHTML="
您输入的密码错误，请重新输入！
";
document.getElementById("password").value="";
dialog();
}else if(result=="2"){
document.getElementById("dialogs").innerHTML="
您的管理员权限不够！
";
dialog();
}else if(result=="3"){
location.href="http://127.0.0.1:8888/TP/main.jsp";
} 
},"json");
} 
};

什么是ajax

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。

感谢各位的阅读！关于“Ajax如何实现带有验证码的局部刷新登录界面”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


文章名称：Ajax如何实现带有验证码的局部刷新登录界面-创新互联
转载源于：http://cqcxhl.com/article/dedidd.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP