用户登陆验证---AJax在后台用json传递数据到前台显示

最新推荐文章于 2023-08-17 15:21:09 发布

原创最新推荐文章于 2023-08-17 15:21:09 发布 · 4.8k 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何使用Servlet后台处理，通过AJAX异步请求和JSON数据格式，实现用户登录验证。在前端HTML页面中，利用AJAX的dataType指定为json，type设置为请求方式，url指定为包含json数据的完整路径，从而实现在不刷新页面的情况下进行数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

servlet 后台得代码：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/json");
		String name=request.getParameter("username");
		String password=request.getParameter("password");
		request.getSession().setAttribute("user", request.getParameter("username"));
		User user = new User(name, password);
		user.setUsername(name);
		user.setPassword(password);
		iuSerDao =new UserDaoImpl();
		try {
			boolean flag=iuSerDao.findLogin(user);
			if(flag){//如果验证成功，则跳转进首页
				request.getRequestDispatcher("hou.html").forward(request, response);
			}else{//如果从数据库查询密码账号不匹配，则往json传字符串数据
				
				JSONObject jsonObject=new JSONObject();
				jsonObject.put("errcroe", "400");
				jsonObject.put("msg", "用户名或者密码错误");
				//response.sendRedirect("index.html");
				PrintWriter out=response.getWriter();
				out.println(jsonObject);
				out.close();
				
				
			}
		} catch (Exception e){
			e.printStackTrace();
		}
		
	}

前台HTML页面：

<script type="text/javascript" src="js/error.js"></script>

<div class="login">
	<h1>Login</h1>
	 
		<input type="text" name="username" placeholder="用户名" required="required"/>
		<input type="password" name="password" placeholder="密码" required="required"/>
		<div id="error"></div>
		<button type="submit" class="btn btn-primary btn-block btn-large" onclick="myfunction();">登录</button>
	 
</div>

当用户点击登陆得时候，产生一个js事件，下面是error.js

function myfunction(){
	$.ajax({
		dataType:"json",
		type:"post",
		url:"UserServlet",
		success:function(data){
			if(data.errcroe=="400"){
				$("#error").append("<span>"+data.msg+"</span>");
				//alert(data.msg)
			}
			/*$.each(data.messafe,function(index,item{
				alert("message")
			});*/
		}
	});
}

这里是用了JQery里面得Ajax异步传输：

dataType数据类型是根据你后台传输得json对象。

type 是你表单请求方式

url 是你json数据所在得路径这个很重要，要写全。