想用前端给的验证码判断，但是发送给后台的数据不能与之结合，现在的问题就是使用第二种形式的验证码，但是未进行用户名密码以及验证码结合的判断。
问题遇到的现象和发生背景
想用前端给的验证码判断，但是发送给后台的数据不能与之结合，现在的问题就是使用第二种形式的验证码，但是未进行用户名密码以及验证码结合的判断。
问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery前端验证码插件DEMO演示</title>
<link rel="stylesheet" type="text/css" href="css/verify.css">
</head>
<body>
<div class="main">
<h1>登录页面</h1>
<input class="c_Name" type="text" name="username" id="username" placeholder="请输入用户名"><br>
<input class="c_Password" type="password" name="password" id="password" placeholder="请输入密码">
<h3>验证码</h3>
</div>
<div id="mpanel2">
</div>
<button type="button" id="check-btn" class="verify-btn">登录</button>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js"></script>
<script type="text/javascript">
var username = $('#username').val();
var password = $('#password').val();
var params={
"username":username,
"password":password
}
$('#mpanel2').codeVerify({
type: 1,
width: '400px',
height: '50px',
fontSize: '30px',
codeLength: 6,
btnId: 'check-btn',
type:"post",
ansyv:true,
data:params,
datatype:"json",
url:"http://localhost:8080/StudentInfo/Login",
ready: function () {
},
success: function (data) {
if(data==-2){
alert("账号或者密码不正确!");
}else if(data==0){
window.location.href="http://localhost:8080/StudentInfo/MainHtml"
}
},
error: function () {
alert('验证码不匹配！');
}
});
</script>
</body>
</html>
//在插件中使用codeVerify对象
$.fn.codeVerify = function(options, callbacks) {``
var code = new Code(this, options);
code.init();
};
//定义Code的方法
Code.prototype = {
init : function() {
var _this = this;
this.loadDom();
this.setCode();
this.options.ready();
this.$element[0].onselectstart = document.body.ondrag = function(){
return false;
};
//点击验证码
this.$element.find('.verify-code, .verify-change-code').on('click', function() {
_this.setCode();
});
//确定的点击事件
this.htmlDoms.code_btn.on('click', function() {
_this.checkCode();
})
},
//加载页面
loadDom : function() {
var panelHtml = '<div class="verify-code-panel"><div class="verify-code"></div><div class="verify-code-area"><div class="verify-input-area"><input type="text" class="varify-input-code" /></div><div class="verify-change-area"><a class="verify-change-code">换一张</a></div></div></div>';
this.$element.append(panelHtml);
this.htmlDoms = {
code_btn : $('#'+this.options.btnId),
code : this.$element.find('.verify-code'),
code_area : this.$element.find('.verify-code-area'),
code_input : this.$element.find('.varify-input-code'),
};
this.htmlDoms.code.css({'width':this.options.width, 'height':this.options.height,'line-height':this.options.height, 'font-size':this.options.fontSize});
this.htmlDoms.code_area.css({'width':this.options.width});
},
//设置验证码
setCode : function() {
var color1Num = Math.floor(Math.random() * 3);
var color2Num = Math.floor(Math.random() * 5);
this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]});
this.htmlDoms.code_input.val('');
var code = '';
this.code_chose = '';
if(this.options.type == 1) { //普通验证码
for(var i = 0; i < this.options.codeLength; i++) {
var charNum = Math.floor(Math.random() * 52);
var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight:bolder;":"";
this.code_chose += _code_chars[charNum];
code += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
}
}else { //算法验证码
var num1 = Math.floor(Math.random() * this.options.figure);
var num2 = Math.floor(Math.random() * this.options.figure);
if(this.options.arith == 0) {
var tmparith = Math.floor(Math.random() * 3);
}
switch(tmparith) {
case 1 :
this.code_chose = parseInt(num1) + parseInt(num2);
code = num1 + ' + ' + num2 + ' = ?';
break;
case 2 :
if(parseInt(num1) < parseInt(num2)) {
var tmpnum = num1;
num1 = num2;
num2 = tmpnum;
}
this.code_chose = parseInt(num1) - parseInt(num2);
code = num1 + ' - ' + num2 + ' = ?';
break;
default :
this.code_chose = parseInt(num1) * parseInt(num2);
code = num1 + ' × ' + num2 + ' = ?';
break;
}
}
this.htmlDoms.code.html(code);
},
//比对验证码
checkCode : function() {
if(this.options.type == 1) { //普通验证码
var own_input = this.htmlDoms.code_input.val().toUpperCase();
this.code_chose = this.code_chose.toUpperCase();
}else {
var own_input = this.htmlDoms.code_input.val();
}
if(own_input == this.code_chose) {
this.options.success();
}else {
this.options.error();
this.setCode();
}
}
};
@Controller
public class UserLoginController {
@Resource
private UserService userService;
//登录页面
@RequestMapping("/LoginHtml")
public String LoginHtml() {
return "UserLogin";
}
//主页面
@RequestMapping("/MainHtml")
public String MainHtml(Model model, String username, String color) {
model.addAttribute("username", username);
model.addAttribute("color", color);
return "Main";
}
@RequestMapping(value = "/Login", method = RequestMethod.POST)
@ResponseBody
public String Login(String username, String password, HttpServletRequest request) {
if (userService.LoginIn(username, password)) {
return "0";
} else {
return "-2";
}
}
}
运行结果及报错内容
点击登录没有反应
我的解答思路和尝试过的方法
我想要达到的结果
使用前端给的验证码，进行用户名密码以及验证码结合的判断
你的验证码是前端生成的？一般都是后端生成的，即使不是最起码后端也要知道验证码是什么
验证码改成后端的就行了，项目开发中没人用前端的验证码，可以参考我这个：
https://blog.csdn.net/qq_44515800/article/details/121860764
1.前端做验证码输入验证,验证码输入通过了
2.再提交后台验证密码 和账号
3.整过流程不就串起来了
那你就保存下生成的验证码，在判断用户输入的验证码，如果通过，在提交用户名密码，后台判断
前端验证码没有任何意义。
如果你非要前端验证码，那就不要跟后端做关联了，没用，
因为前端页面一刷新，东西全没了，你后端肯定没法做关联，况且人家可以直接调你接口。
所以你要么只是前端做一个简单的小限制，如果要跟后端关联，你必须把验证挪到后端。
后端生成验证码，然后存到session里，多少秒过期，然后下次请求从session里取
一般都是后端绘制图形验证码 放在session对象里面，前端页面用img 标签接收，然后请求接口的时候把验证码传过去和后端session 保存的验证码进行比较。
前端直接生成验证码的话和谁去比较？
还有一种常用的方式就是交互方式的验证码 类似于12306 登录的时候选择正确的图形 、或者图片拼接完整、旋转方向正确等等方式