AJAX+JavaScript表单验证

javascript 同时被 2 个专栏收录
6 篇文章 1 订阅
13 篇文章 0 订阅

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
    点赞
  • 0
    评论
  • 6
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

光羽住一

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值