前端-3-【登录】Ajax验证
|
话说： 各位读者，下午好啊，我是小美。那天给同事“洗脑”，分享了在“中国之声”听到的广告语——“把每天当做新年来过，敢梦敢想敢拼搏！”，结果被同事嘲笑了好久，说蛮适合传销的….. 还是那句口号：学会一样东西的感觉很快乐！如果能够创造一样东西，感觉会更加快乐！ 目录： 1.登录界面展示 难度系数：★☆☆☆☆ 1.登录验证效果展示 2.前端Ajax验证代码 login.jsp <!--引入jQuery -->
<script src="js/jquery-1.8.3.js"></script>
!-- 前端Ajax验证用户名 -->
<script type="text/javascript"> $(function() { //用户名异步验证 $("#userName").blur(function() { //alert("失去焦点！"); //获取userName的值 对用户名进行非空验证 var userName = $(this).val().trim(); if(userName == "" ||userName == null){ $("#loginInfo").html("请输入用户名"); $("#loginInfo").css({"color":"red","font-size":"15px","font-weight":"bolder"}); }else{ $("#loginInfo").html(""); } //Ajax异步验证用户名是否存在？ $.ajax({ url:"getUserByUserName",//访问的Servlet async:true,//是否异步 type:"get",//post data:{"userName":userName},//往Servlet或者 Controller发送数据 success:function(data){//回调函数 console.log("进来了！"); console.log(data);//Object {userId: 4,userName: "admin2",userNick: "不三不四",password: "222222",rePassword: "222222"…} 如果没有数据：[] var userNameInfo = ""; //定义用户名提示信息 if(data!="") { console.log("用户存在"); userNameInfo = "√"; $("#userNameInfo").html(userNameInfo); $("#userNameInfo").css({"color":"green","font-size":"25px","font-weight":"bolder"}); }else{ console.log("用户不存在！"); userNameInfo = "×"; $("#userNameInfo").html(userNameInfo); $("#userNameInfo").css({"color":"red","font-weight":"bolder"}); $("#userName").focus();//聚焦直到输入正确为止 } },error:function(){ alert("报错啦！"); },dataType:"json"//传送的数据类型 }); }); //密码验证 $("#password").blur(function() { //alert("进来了！"); var password = $(this).val().trim(); if(password =="") { $("#loginInfo").html("请填写密码"); $(this).focus(); }else{ $("#loginInfo").html(""); } }); //验证码验证 $("#code").blur(function(){ //alert("进来了！"); var code = $(this).val().trim(); $.ajax({ url:"ajaxCode",async:true,type:"get",dataType:"json",success:function(data) { console.log("后台传过来的验证码:"+data); console.log("前台接收的输入的验证码:"+code); if(data == password) { alert("equal"); $("#loginInfo").html("888"); } if(data != password) { $("#loginInfo").html("");//此处提示验证码有误！ } },error:function() { alert("验证码验证失败！"); } }); }); }) </script>
还有onsubmit的js验证呢. <!--引入外部JS -->
<script type="text/javascript" src="js/login.js"></script>
//登录简单验证
function checkLoginForm() {
//alert("进来了");
//获取表单元素
var lgForm = document.loginForm;
var userName = lgForm.userName.value;//这里用的是name选取，方便些！
var password = lgForm.password.value;
var code = lgForm.code.value;
var lgInfo = document.getElementById("loginInfo");
if(userName == "") {
//alert("用户名为空!");
lgInfo.innerHTML = "请填写【用户名】";
lgForm.userName.focus();
return false;
}else if(password == "") {
lgInfo.innerHTML = "请填写【密码】";
lgForm.password.focus();
return false;
}else if(code == "") {
lgInfo.innerHTML = "请填写【验证码】";
lgForm.code.focus();
return false;
}else {
return true;
}
}
注意下判断的逻辑奥~ 3.后端代码 这个后端是Servlet，换做框架，思路一致。 package com.hmc.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
/** * *2018年1月28日 *User:Meice *上午11:44:34 */
@WebServlet("/ajaxCode")
public class AjaxCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp) throws ServletException,IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req,IOException {
String code = (String)req.getSession().getAttribute("code");
System.out.println("后端接收验证码:"+code);
Gson gson = new Gson();
String json = gson.toJson(code);
System.out.println("转换后的验证码json格式为:"+json);//"rNb8"
resp.getWriter().write(json);
}
}
注意，这里没有配置web.xml,直接通过注解@WebServlet搞定！如果要配置的话，这么配置： <!-- ================配置登录Ajax验证 注解方式省略此配置========================= -->
<!-- <servlet> <servlet-name>getUserByUserName</servlet-name> <servlet-class>com.hmc.controller.GetUserByUserNameServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>getUserByUserName</servlet-name> <url-pattern>/getUserByUserName</url-pattern> </servlet-mapping> -->
用框架是如何做的？在上一篇博客中有专门对比二者的，当时是2种方式实现验证码效果；这里更进一步，前后端值传递。 4.小结 1.Ajax请求成功！后台返回JSon也没问题，alert()无论success还是error，都没有效果！？ 2.HttpServletResponse实例对象获得输出流有两种方式 3.验证码Servlet中把验证码在写入图片的之前存到session中 ，如果在页面直接${}获取，那么 获取 4.还是那句话：小小if判断顺序还是需要注意下：比如： if(data != password) {
$("#loginInfo").html("验证码有误~");
}else{
$("#loginInfo").html("");
}
这么写，如果验证码和输入一致，就不会清空提示！但是如果这么写，就有效果了.其实本质表达意思不是 一致么？ if(data != password) {
$("#loginInfo").html("验证码有误~");
}
if(data == password) {
$("#loginInfo").html("");
}
遗憾的是，中午效果好好的，下午就只进入！=，很是无语！暂且搁置… 5.验证码忽略大小写？ 6.onsubmit(return checkLoginForm())方法自己用JS写就很溜，用jQuery写就捉襟见肘，不知道为啥。 7.有时候js和jQuery一块写，容易混淆。其实会发现，jQuery中用的基本都是方法，也就是封装好了的: 8.前台后台交互，用Ajax； 好了！ 暂且到这里，咱们下期再会！如果你看到了这篇博客，并且耐心 看完了，欢迎评论交流~ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |