注册表单验证 json格式传参

青旅半醒 2022-05-04 05:58 344阅读 0赞

1.加入json相关架包

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="xc"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <style type="text/css">
    .dis {
    	display:display;
    }
     .aa {
    	display: none;
    } 
    </style>
    <script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" >
    var flag1=false;
    var flag2=false;
    var flag3=false;
    var flag4=false;
    $(document).ready(function(e) {
    	 $('#username').blur(function(){
    	 	 if($("#username").val()==""){
    	 		$("#result").text("请输入用户名");
    		 } else{
             $.ajax({
                 type: "GET",   //数据提交类型
                 url: "panduanUserServlet",   //提交到哪里
                 data: {username:$("#username").val()},  //传参json采用键值对
                 //json格式传参
                 dataType: "json",  //json格式传参
                 success:function(data){   //data 回调函数，服务器执行完之后， 接收服务器响应的数据
                            var resultObj=$("#result");
                            var eValue=eval('data.'+'response'); 
                          // alert(eValue); 
                            if(eValue){
                            	//做自己想做的事情
                            	$("#result").text("此用户名已经被注册");
                            }else{
                            	flag1=true;
                            	$("#result").text("");
                            }
                          },
                 error: function (d,errorThrown) {
    				alert("失败");
    				alert(errorThrown);
    			} 
             });
    		 }
        });
    	
        $(":password:eq(0)").blur(function(){
    		var len= $(":password:eq(0)").val().length;
    		//alert(len);
    		if(len<6){
    			$("#a1").text("请输入6位以上密码!");	
    			return false;
    		}else{
    			$("#a1").text("");
    			flag2=true;
    			return true;
    		}
    	});
    	  $(":password:eq(1)").blur(function(){
    		 var pwd1= $(":password:eq(0)").val();
    	    var pwd2=$(":password:eq(1)").val();
    		if(pwd1==pwd2){
    			$("#a2").text("");
    			flag3=true;
    			return true;
    		}else{
    			$("#a2").text("两次密码输入不一致！");
    			return false;
    		}
    	  });
    	  
    	  $("#email").blur(function(){
    		 
    	  var emails= $("#email").val();
    	 //  alert(emails);
    	  var mg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;	
    			if (!mg.test(emails)) {
    				$("#a3").text("邮箱格式错误");
    			} else {
    				$("#a3").text("");
    				flag4=true;
    			}
    	  });
    	  
    	  $("form:eq(1)").submit(function(){
    		 // alert("bbb");
    		  if(flag1==false||flag2==false||flag3==false||flag4==false){
    			  alert("无法提交，请正确输入");
    			  return false;
    		  }else{
    			  return true;
    		  }
    	  });
    	  
    	
    });
    
    </script>
    </head>
    <body>
    	<%
    		request.setCharacterEncoding("utf-8");
    		response.setCharacterEncoding("utf-8");
    		String user="";
    		String flag = "";
    		if (request.getAttribute("flag") != null) {
    			flag = (String) request.getAttribute("flag");
    		}
    		if(request.getAttribute("username")!=null){
    			user=(String) request.getAttribute("username");
    		}
    		System.out.print(flag);
    	%>
    	<div id="header" class="wrap">
    		<div id="logo">网上书城</div>
    		<div id="navbar">
    			<form method="get" name="search" action="">
    				搜索：<input class="input-text" type="text" name="keywords" /><input
    					class="input-btn" type="submit" name="submit" value="" />
    			</form>
    		</div>
    	</div>
    	<div id="register">
    		<div class="title">
    			<h2>欢迎注册网上书城</h2>
    		</div>
    		<div class="steps">
    			<ul class="clearfix">
    				<li class="current">1.填写注册信息</li>
    				<li class="unpass">2.注册成功</li>
    			</ul>
    		</div>
    		<form method="post" action="registerServlet">
    			<dl  >
    				<dt>用 户 名：</dt>
    				<dd>
    				<input id="username"  class="input-text" type="text" name="userName"/>
    					<span id="result"></span>
    					
    				</dd>
    				<dt>密　　码：</dt>
    			<dd><input class="input-text" type="password" name="passWord" /><span id="a1" ></span></dd>
    			<dt>确认密码：</dt>
    			<dd><input class="input-text" type="password" name="rePassWord" /><span id="a2"></span></dd>
    			<dt>Email地址：</dt>
    			<dd><input id="email" class="input-text" type="text" name="email" /><span id="a3"></span></dd>
    			<dt></dt>
    			<dd class="button">
    					<input class="input-reg" type="submit" name="register"  value="" />
    				</dd>
    
    			</dl>
    		</form>
    	</div>
    	<div id="footer" class="wrap">网上书城 © 版权所有</div>
    </body>
    </html>

servlet

package com.db.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.net.URLEncoder;
    
    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.db.service.UserService;
    
    import net.sf.json.JSONObject;
    
    /**
     * Servlet implementation class panduanUserServlet
     */
    @WebServlet("/panduanUserServlet")
    public class panduanUserServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public panduanUserServlet() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		//response.getWriter().append("Served at: ").append(request.getContextPath());
    		request.setCharacterEncoding("utf-8");
    		 response.setContentType("text/json; charset=utf-8");//设置响应的数据格式
    		UserService service = new UserService();
    		String username=request.getParameter("username");
    		request.setAttribute("username", username);
    		 JSONObject jsonobj = new JSONObject(); 
    		PrintWriter out=response.getWriter();
    		Boolean flag=false;
    		System.out.println("user:"+username);
    		flag= service.username(username);
    			 jsonobj.put("response", flag);
    		      out.println(jsonobj);
    	out.flush();
    	out.close();
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doGet(request, response);
    	}
    
    }