javaweb实例--订单管理系统--JSON和AJAX验证密码

最新推荐文章于 2022-04-08 11:50:24 发布

清风和月明

最新推荐文章于 2022-04-08 11:50:24 发布

阅读量348

点赞数

分类专栏： JavaWeb 文章标签： java ajax js javaweb

本文链接：https://blog.csdn.net/qq_41116027/article/details/112545766

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

web1.0时代

早期网站，登入，如果失败，需要刷新页面，才能重新登入；不点击提交按钮不知道自己密码输错了。
现在大多数的网站，都是局部刷新，不刷新整个页面的情况下，实现页面更新。
像百度搜索框，当年输入字进去就会在下方出现提示选项

什么是json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

json格式

{"name","zhangsan"} //用{} 表示一个对象
[{"name","张三"},{"name","李四"}] //用[]表示一个数组

json字符串：指的是符合json格式要求的js字符串。
例如：var jsonStr = “{StudentID:‘100’,Name:‘tmac’,Hometown:‘usa’}”;
json对象：指符合json格式要求的js对象。
例如：var jsonObj = { StudentID: “100”, Name: “tmac”, Hometown: “usa” };

什么是AJAX

ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。

AJAX的使用

常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步

json和AJAX实现验证密码

在这里插入图片描述

首先是jsp

<div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>密码修改页面</span>
            </div>
            <div class="providerAdd">
                <form id="userForm" name="userForm" method="post" action="${pageContext.request.contextPath }/jsp/user.do">
                    <input type="hidden" name="method" value="savepwd">
                    <!--div的class 为error是验证错误，ok是验证成功-->
                    <div class="info">${message}</div>
                    <div class="">
                        <label for="oldPassword">旧密码：</label>
                        <input type="password" name="oldpassword" id="oldpassword" value=""> 
						<font color="red"></font>
                    </div>
                    <div>
                        <label for="newPassword">新密码：</label>
                        <input type="password" name="newpassword" id="newpassword" value=""> 
						<font color="red"></font>
                    </div>
                    <div>
                        <label for="newPassword">确认新密码：</label>
                        <input type="password" name="rnewpassword" id="rnewpassword" value=""> 
						<font color="red"></font>
                    </div>
                    <div class="providerAddBtn">
                        <!--<a href="#">保存</a>-->
                        <input type="button" name="save" id="save" value="保存" class="input-button">
                    </div>
                </form>
            </div>
        </div>

用AJAX 传递数据到后台
前提，引入jquery

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>

jsp

var oldpassword = null;
var newpassword = null;
var rnewpassword = null;
var saveBtn = null;

$(function(){
	oldpassword = $("#oldpassword");
	newpassword = $("#newpassword");
	rnewpassword = $("#rnewpassword");
	saveBtn = $("#save");
	
	oldpassword.next().html("*");
	newpassword.next().html("*");
	rnewpassword.next().html("*");
	//blur 当鼠标移出输入框时触发事件
	//当输入旧密码后，失去聚焦事件触发，发出url:path+"/jsp/user.do"请求
	//在servlet 获取method 和 oldpassword 
	//接收返回的json
	oldpassword.on("blur",function(){
		$.ajax({
			type:"GET",
			url:path+"/jsp/user.do",
			data:{method:"pwdmodify",oldpassword:oldpassword.val()},
			dataType:"json",
			success:function(data){
				if(data.result == "true"){//旧密码正确
				//
					validateTip(oldpassword.next(),{"color":"green"},imgYes,true);
				}else if(data.result == "false"){//旧密码输入不正确
					validateTip(oldpassword.next(),{"color":"red"},imgNo + " 原密码输入不正确",false);
				}else if(data.result == "sessionerror"){//当前用户session过期，请重新登录
					validateTip(oldpassword.next(),{"color":"red"},imgNo + " 当前用户session过期，请重新登录",false);
				}else if(data.result == "error"){//旧密码输入为空
					validateTip(oldpassword.next(),{"color":"red"},imgNo + " 请输入旧密码",false);
				}
			},
			error:function(data){
				//请求出错
				validateTip(oldpassword.next(),{"color":"red"},imgNo + " 请求错误",false);
			}
		});
		//当鼠标移入输入框，聚焦事件
	}).on("focus",function(){
		validateTip(oldpassword.next(),{"color":"#666666"},"* 请输入原密码",false);
	});
	
	newpassword.on("focus",function(){
		validateTip(newpassword.next(),{"color":"#666666"},"* 密码长度必须是大于6小于20",false);
	}).on("blur",function(){
		if(newpassword.val() != null && newpassword.val().length > 5
				&& newpassword.val().length < 20 ){
			validateTip(newpassword.next(),{"color":"green"},imgYes,true);
		}else{
			validateTip(newpassword.next(),{"color":"red"},imgNo + " 密码输入不符合规范，请重新输入",false);
		}
	});
	rnewpassword.on("focus",function(){
		validateTip(rnewpassword.next(),{"color":"#666666"},"* 请输入与上面一致的密码",false);
	}).on("blur",function(){
		if(rnewpassword.val() != null && rnewpassword.val().length > 5
				&& rnewpassword.val().length < 20 && newpassword.val() == rnewpassword.val()){
			validateTip(rnewpassword.next(),{"color":"green"},imgYes,true);
		}else{
			validateTip(rnewpassword.next(),{"color":"red"},imgNo + " 两次密码输入不一致，请重新输入",false);
		}
	});
	
	//点击保存事件
	saveBtn.on("click",function(){
		oldpassword.blur();
		newpassword.blur();
		rnewpassword.blur();
		if(oldpassword.attr("validateStatus") == "true" &&
			 newpassword.attr("validateStatus") == "true"
			&& rnewpassword.attr("validateStatus") == "true"){
			if(confirm("确定要修改密码？")){
				$("#userForm").submit();
			}
		}
		
	});
});

servlet

 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 //根据method 传的值不同来判断
       String method=req.getParameter("method");
       if(method.equals("savepwd")&&method!=null){
       //点击保存按钮，响应更新密码操作
               this.updatePwd(req,resp);
       }else if(method.equals("pwdmodify")&&method!=null){
       //鼠标移出原密码的输入框，响应返回原密码和输入的原密码是否相同的结果true or false
               this.pwdModify(req,resp);
       }
    }

//原密码的比较

//验证旧密码
    public void pwdModify(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
    //获取存在session的用户对象的密码
        UserInfo user =(UserInfo) req.getSession().getAttribute(Constants.USER_SESSION);
        //获取输入的原密码（AJAX data:{method:"pwdmodify",oldpassword:oldpassword.val()}返回给服务器的参数）
        String oldpassword=req.getParameter("oldpassword");
        //结果集
        Map<String,String> resultMap=new HashMap<String, String>();
        if(user==null){
            //session 失效了
            resultMap.put("result","sessionerror");
        }else if(oldpassword==null){
            //输入密码为空
            resultMap.put("result","error");
        }else{
            String userpassword=user.getUserPassword();
            if(oldpassword.equals(userpassword)){
                //旧密码验证正确
                resultMap.put("result","true");
            }else{
                //旧密码验证不正确
                resultMap.put("result","false");
            }
        }
        //响应返回json 格式
        resp.setContentType("Application/json");
        PrintWriter writer = resp.getWriter();
        //JSONArray 阿里巴巴的json工具类，将结果集输出到页面去
        writer.write(JSONArray.toJSONString(resultMap));
        writer.flush();
        writer.close();
    }

清风和月明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaweb实例--订单管理系统--JSON和AJAX验证密码

web1.0时代早期网站，登入，如果失败，需要刷新页面，才能重新登入；不点击提交按钮不知道自己密码输错了。现在大多数的网站，都是局部刷新，不刷新整个页面的情况下，实现页面更新。什么是jsonJSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。json格式{"name","zhangsan"} //用{} 表示一个对象[{"name","张三"},{"name","李四"}] //用[]表示一个数组json字符串：指的是符合j
复制链接

扫一扫