AJAX+JavaScript表单验证

最新推荐文章于 2021-08-06 09:46:11 发布

光羽住一

最新推荐文章于 2021-08-06 09:46:11 发布

阅读量1.9k

点赞数

分类专栏： javascript JAVA 文章标签： ajax javascript servlet 表单验证

本文链接：https://blog.csdn.net/xieminyao123/article/details/90729585

版权

JAVA 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 2 订阅

订阅专栏

AJAX表单验证

1.前端组件以及JS+AJAX完成表单数据的上传

<html>
 <head></head>
 <body>
  <fieldset> 
   <div class="form-group"> 
    <input class="form-control" placeholder="请输入用户名" name="username" id="name" required="required" autofocus="" /> 
   </div> 
   <div class="form-group"> 
    <input class="form-control" placeholder="请输入密码" name="password" id="password" type="password" required="required" value="" /> 
   </div> 
   <input value="登录" type="button" class="btn btn-lg btn-success btn-block" onclick="check()" /> 
  </fieldset>
 </body>
<script>
function check(){
    var xhttp = new XMLHttpRequest();
    var username = document.getElementById("name").value;
    var password = document.getElementById("password").value;
    if(username==""||password==""){
        alert("不能为空！")
    }else{
    var url = "CustomerLogin?username="+username+"&password="+password;
    xhttp.open("POST",url,true);
    xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                // Typical action to be performed when the document is ready:	
                var message=xhttp.responseText;
                if(message=="success"){
                    window.location.href = 'CustomerShop.html';
                }else{
                    alert(message);
                }
            }
        };
    xhttp.send();
    }
}
</script>
</html>

2.后台表单验证逻辑

public String checkCustomer(Customer cus) {
		//根据用户名从数据库中查询,并返回List
		String hql="from Customer where name=?";
		HibernateService hs=new HibernateService();
		List<Customer>cusList=hs.CustomerSearch(hql, cus.getName());
		//如果按照账号查找存在
		if(cusList.size()==1) {
			Customer temp=(Customer)cusList.get(0);
			//匹配密码是否正确
			if((cus.getPassword()).equals(temp.getPassword())) {
				return "success";
			}else {
				return "fail";
			}		
		}else {
			return "none";
		}
	}

3.后台结果返回部分，也就是Servlet部分

@WebServlet(name="/CustomerLogin",urlPatterns= {"/WEB-UI/pages/CustomerLogin"})
public class CustomerLogin extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public CustomerLogin() {
        super();
        // TODO Auto-generated constructor stub
    }
	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.setCharacterEncoding("UTF-8");
		response.setContentType("text/xml;character=utf-8");
		
		Customer cus =new Customer();
		CustomerService service=new CustomerService();
		//获取前端发来的信息
		String name=request.getParameter("username");
		String password=request.getParameter("password");
		//中文乱码处理
		byte [] bytes = name .getBytes("ISO-8859-1");
		name = new String(bytes, "utf-8");
		byte [] bytes2 = password .getBytes("ISO-8859-1");
		password = new String(bytes2, "utf-8");
	
		//创建含有登录信息的对象
		cus.setName(name);
		cus.setPassword(password);
		System.out.println(cus.getName()+""+cus.getPassword());
		
		//调用CustomerService验证用户是否存在
        String message="";
		String result=service.checkCustomer(cus);
		if(result.equals("success")) {
			message="success";
		}else if(result.equals("fail")) {
			message="密码错误，请重新输入！";
		}else {
			message="用户不存在，请重新登录或前往注册！";
		}
        //信息返回前端
		response.getWriter().write(message);
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

4.运行结果

光羽住一

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
AJAX+JavaScript表单验证

AJAX表单验证1.前端组件以及JS+AJAX完成表单数据的上传<html> <head></head> <body> <fieldset> <div class="form-group"> <input class="form-control" placeholder="请输入用户名...
复制链接

扫一扫