Java——通过ajax与servlet进行简单的前后交互

今天我们一起来学习一下通过ajax和servlet实现一个简单的登录验证的前后交互

首先我们通过ajax将前端页面得到的数据传到我们的servlet中，也ajax将servlet中传回的返回值进行处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!--导入一个jquery包-->
</head>
<body>
	<input id="name" type="text" name="username"/>
	<input id="pwd" type="password" name="pwd"/>
	<input id="btn_1" type="button" value="提交" οnclick="send()"/>
	
</body>
<script type="text/javascript">
	function send(){
		var name = $("#name").val();
		var pwd = $("#pwd").val();
		$.ajax({
			 	url:"http://localhost:8080/MyWeb/LoginTest",    //请求的url地址
			    dataType:"json",   //返回格式为json
			    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
			    data:{"name":name,"pwd":pwd},    //参数值
			    type:"POST",   //请求方式
			    beforeSend:function(){
			        //请求前的处理
			    },
			    success:function(req){
                                //返回值是json格式因此需要加上想调取的信息的key值
			    	alert(req.data);
			        //请求成功时处理
			    },
			    complete:function(){
			        //请求完成的处理
			    },
			    error:function(){
			        
			    	//请求出错处理
			    }
			});
	}
		
</script>
</html>

传过来之后我们就可以对信息进行操作，因为前端页面的请求方式是post，因此会通过dopost（）方法进行处理

为什么要用post在https://blog.csdn.net/weixin_44407699/article/details/97700696有说明

package com;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 * Servlet implementation class LoginTest
 */
@WebServlet("/LoginTest")
public class LoginTest extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginTest() {
        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(null, 0, 0);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");//设置接受数据的编码格式
		response.setContentType("text/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");//设置响应数据的编码格式
		String username = request.getParameter("name");//接收传来的用户名
		String password = request.getParameter("pwd");//接受传来的密码
		String json="";
		if("admin".equals(username)&&"123456".equals(password)){//进行用户名、密码验证
			json="{\"data\":\"欢迎您，"+username+"\"}";
		}
			
		else {
			json="{\"data\":\"对不起您的账号或密码输入错误，请重新输入\"}";
		}
		
		response.getWriter().append(json);//返回数据
	}

}

页面交互成功后，我们来看一下结果

首先输入错误的账号与密码

弹框弹出json返回的字符串

之后输入正确的账号密码

弹框弹出返回的json中的字符串

潇雪凌宇

发布了33 篇原创文章 · 获赞 71 · 访问量 4833

私信关注

Java——通过ajax与servlet进行简单的前后交互

猜你喜欢