用ajax去做图片验证码登录

下面是view()代码
<script src="~/Scripts/jquery-1.10.2.js"></script>


@*以下就是图片验证码;用户名、密码、及验证码*@

 

<script language="javascript" type="text/javascript">

var code; //在全局 定义验证码
function createCode() {
code = new Array();
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";

var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');

for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 32);
code += selectChar[charIndex];
}
if (code.length != codeLength) {
createCode();
}
checkCode.value = code;
}
//登录验证
function deng()
{

var inputCode = document.getElementById("input1").value.toUpperCase();
//判断验证码是否正确,是否有值
if (inputCode.length <= 0) {
alert("请输入验证码!");
return false;
}
else if (inputCode != code)
{
alert("验证码输入错误!");
createCode();
return false;
}
else
{
$.ajax({
url: "/Zhou/Info",
data: {
name: $("#name").val(),
pwd: $("#pwd").val(),
},
dataType: "json",
type: "post",
success: function (data) {
if (data > 0) {
alert("登录成功");
location.href = '/Zhou/Show';
}
else
{
alert("没有此用户")
}
}
})
}



}
</script>

 

<h2>登录</h2>
<table>
<tr>
<td>用户名:</td>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input id="pwd" type="text" /></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" id="input1" class="iid" /> <input id="checkCode" style="width:60px" class="code" type="button" value="button" onClick="createCode()" /></td>

</tr>
<tr>
<td><input id="Button1" type="button" value="登录" οnclick="deng()"/>

</td>
</tr>
</table>

 

控制器的话不用,也不需要创建文件夹

 

转载于:https://www.cnblogs.com/liuziyang1/p/10151491.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
采用ajax技术实现的图形验证码,在前端进行验证。验证码信息为图片。每一行代码均有注释,通俗易懂。 实现步骤: 1、创建web工程 2、在jsp页面,编写一个 3、编写一个servlet,在servlet中产生图形验证码 ------------------------------------------------------------ //1、给客户端作出的回应是以图片的方式来回应 response.setContentType("image/jpeg"); //2、创建一个图形缓冲区,用于绘制图形 (宽度,高度,颜色的生成方案) BufferedImage image = new BufferedImage(800,600,BufferedImage.TYPE_INT_RGB); //3、创建一支画笔(图形设备接口)用于绘图 Graphics g = image.getGraphics(); //4、指定图笔的颜色 g.setColor(getColor(200,256)); //5、绘制一个矩形框,作为验证码的背景 g.fillRect(0,0, 800,600); //产生一个输出流,准备把图片以流的方式,输出到客户端 OutputStream out = response.getOutputStream(); //输出在图形缓冲区中,绘制的图片 ImageIO.write(image,"jpg",out); //关闭流 out.close(); //随机生成背景颜色 private Random rd = new Random(); //产生随机数类 public Color getColor(int start,int end){ int r = start+rd.nextInt(end-start); int g = start+rd.nextInt(end-start); int b = start+rd.nextInt(end-start); return new Color(r, g, b);//根据三原色的值,随机在指定范围内,生成一种颜色 } --------------------------------------------------------------------------- 0-120 比较适合文字的颜色 100-200 适合干扰线条的颜色 200-255 适合背景颜色 --------------------------------------------------------------------------- 生成图片中的文字: 1、先编写一个字符串,包含:数字,大小字母 private String s = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; 2、在产生背景之后,编写如下代码,产生四个字符(并且,把生成字符,保存在session中,在登录的时候用来判断) String code=""; //用于保存生成的四个字符 for(int i=0;i<4;i++){ //生成一个随机数,它的取值范围,一定要在s这个字符串的长度范围之内 int index = rd.nextInt(s.length()); //2 //把index作为下标,来取得字符串的中某一个字符 char c = s.charAt(index); //指定文字的颜色----深色段 g.setColor(getColor(0,120)); //创建一个字体 Font f = new Font("隶书",Font.ITALIC|Font.BOLD,60+rd.nextInt(60)); //把字体关联到画笔 g.setFont(f); code+=c; //把生成的字符连接成一个字符串 //把文字输出到图片上 g.drawString(String.valueOf(c), 100+i*80+rd.nextInt(100),200+rd.nextInt(150)); } request.getSession().setAttribute("code",code);//把生成的验证码信息,存储到session中,登录的时候,用来作判断 ------------------
可以使用jQuery来实现图片验证码功能。以下是一个简单的示例: HTML部分: ```html <form> <div class="form-group"> <label for="captcha">验证码</label> <input type="text" class="form-control" id="captcha" placeholder="请输入验证码"> <img src="" id="captchaImage" alt="验证码"> <button type="button" class="btn btn-primary" id="refreshCaptcha">刷新验证码</button> </div> <button type="submit" class="btn btn-primary">提交</button> </form> ``` JavaScript部分: ```javascript // 刷新验证码 $('#refreshCaptcha').click(function() { $('#captchaImage').attr('src', '/generate-captcha'); }); // 表单提交验证 $('form').submit(function(event) { event.preventDefault(); var captcha = $('#captcha').val(); // 发送验证码到服务器进行验证 $.post('/validate-captcha', { captcha: captcha }, function(response) { if (response.success) { // 验证码正确,继续处理表单提交逻辑 // ... } else { // 验证码错误,提示用户重新输入 alert('验证码错误,请重新输入'); } }); }); ``` 上述代码包括两个主要部分:刷新验证码和表单提交验证。 刷新验证码:点击 "刷新验证码" 按钮时,会向服务器发送请求获取新的验证码图片地址,并将该地址赋值给 `<img>` 标签的 `src` 属性,从而刷新验证码图片。 表单提交验证:在表单提交之前,会获取用户输入的验证码,并通过 AJAX 请求将验证码发送给服务器进行验证。服务器返回的 `response` 对象中包含一个 `success` 属性,用于表示验证码是否正确。如果验证码正确,则可以继续处理表单提交逻辑;如果验证码错误,则会弹出一个提示框告知用户重新输入。 请注意,上述示例中的 `/generate-captcha` 和 `/validate-captcha` 是示意的服务器端路由地址,需要根据实际情况进行替换。另外,还需要在服务器端实现生成验证码和验证验证码的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值