Ajax的初次使用:实现一个简单的登陆页面

最新推荐文章于 2022-04-25 22:00:46 发布

黑虎阿符

最新推荐文章于 2022-04-25 22:00:46 发布

阅读量1k

点赞数

分类专栏：学习文章标签：学习 Ajax

本文链接：https://blog.csdn.net/qq_45745415/article/details/102732690

版权

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这次写出一个登陆页面不使用表单的提交而是刚学到的ajax
并在失去焦点时判断文本内容是否符合正则表达式

页面代码

<style type="text/css">
		body {
			background-color: #CC9966;
		}
		*{
			font-size: 30px;
		}
		input {
			margin-top: 20px;
			border-radius: 10px;
			
		}
		#name,#pwd{
			background-color: #CCFFFF;
			width: 250px;
		}
		#red{
			color: red;
		}
	</style>

<body>
  <form action="#">
    账户:<input type="text" name="name" id="name"></br>
    密码:<input type="text" name="pwd" id="pwd"></br>
    <input type="button" value="登陆">
  </form>
  <div id="show"></div>
</body>

<!--登陆成功后的显示页面-->
<p><b>恭喜登陆成功!</b></p>
  <!-- 此处仅仅作登录成功后的显示 -->

接下来是使用ajax提交数据至servlet,
并由servlet判断并返回结果,
实现不跳转页面刷新页面效果

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			PrintWriter out = response.getWriter();
			String name="admin";
	        String pwd="Admin";
	        //设置用户名与密码↑
	        String ajaxName=request.getParameter("name");
	        String ajaxPwd= request.getParameter("pwd");
	        //接收用户名与密码↑
	        if(name.equals(ajaxName)&&pwd.equals(ajaxPwd)){
	            out.print("ok");
	        }else{
	            out.print("error");
	        }
	        //判断并返回结果
	        out.flush();
	        out.close();
	}

顺便再加上正则的校验

<script type="text/javascript">
    $(function () {
    	var nameRuler=/^[a-zA-Z0-9]{2,8}$/ 
    	//用户名只要求不带符号并2-8位字母或数字即可
    	$('#name').blur(function(){
    		var name = $("#name").val();
    		inputTest(nameRuler,name,'name')
    	})
    	var pwdRuler=/^[A-Z]+[a-zA-Z0-9\W]{4,15}$/ 
    	//密码只要求首位大写, 并且5-16位
    	$('#pwd').blur(function(){
    		var pwd = $("#pwd").val()
    		inputTest(pwdRuler,pwd,'pwd')
    	})
    	//设置输入框的校验方法
    	function inputTest(ruler,value,id){
    		$("#"+id+"").next('span').detach()
    		if(ruler.test(value)){
    			$("#"+id+"").css('background-color','green').after('<span>✔</span>').next('span').css('color','green')
    		}else{
    			$("#"+id+"").css('background-color','red').after('<span>✘</span>').next('span').css('color','red')
    		}
    	}
        $(':button').on('click',function () {
          $.ajax({
            type:'post',//使用post方法提交
            url:"TestServlet",//提交至这个servlet
            data:{
              name:$("#name").val(),
              pwd:$("#pwd").val(),
            },//获取输入框内容并提交
            dataType:'text',//接收的数据类型
            success:function (data) {
              if (data=="ok"){
                  window.location.href='show.jsp'
              }else{
                $("#show").html("<span id='red'>登陆失败!</span>");
              }
            }//接收servlet的反馈值并判断
          })
        })
    })
  </script>

最后的效果图如下
在这里插入图片描述

黑虎阿符

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax的初次使用:实现一个简单的登陆页面

这次写出一个登陆页面不使用表单的提交而是刚学到的ajax并在失去焦点时判断文本内容是否符合正则表达式页面代码<style type="text/css"> body { background-color: #CC9966; } *{ font-size: 30px; } input { margin-top: 20px; border-...
复制链接

扫一扫