jQuery ajax异步刷新当前页面的某个区域（载入其他页面），并且需要获取表单提交值

最新推荐文章于 2023-03-17 13:25:15 发布

smx6666668

最新推荐文章于 2023-03-17 13:25:15 发布

阅读量1k

点赞数 1

分类专栏：前端HTML 文章标签： html javascript 前端 ajax jquery

本文链接：https://blog.csdn.net/smx6666668/article/details/124203981

版权

前端HTML 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍如何在前端使用jQuery实现表单内容的实时匹配，通过Ajax在点击按钮后不刷新整个页面，仅加载'Result.jsp'内容并保持其他输入框数据不变。重点讲解了如何在Servlet中处理请求和响应，并演示了前后端交互的简化流程。

摘要由CSDN通过智能技术生成

应用于，实时匹配答案，后台需要获取表单内容，并且刷新区域较大，直接在该区域加载另一个jsp或html页面时，并且不改变当前页面其他输入框内容

简单框架

主页面（jsp局部）

<input type="text" id="test1" name="test1" class="inputclass" placeholder="">
<input type="text" id="test2" name="test2" class="inputclass" placeholder="">
<button class="layui-btn" id="tijiao">匹配答案</button>
<div id="content"></div>
<script src="js/jquery.min.js"></script>
<script >
$("#tijiao").on("click",function(){
	 var title=$("#test1").val();
	 var label=$("#test2").val();	
	 $("#content").load('AServlet?test1='+test1+'&test2='+test2); //加载相对应的内容

</script>

servlet

public class AServlet extends HttpServlet {
	

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	//处理参数...
	
		// 跳转到结果显示页面，前端Ajax异步显示
		request.getRequestDispatcher("Result.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

Ajax异步刷新页面 Result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
刷新区域内容
</body>
</html>