前端jsp通过点击按钮发送一个后端请求，并将表单数据一并发送到后端

这篇博客介绍了如何利用jQuery的$(document).ready和$(#btnUpdate).click事件结合window.location.href来实现页面跳转，并在跳转过程中传递表单数据。通过serialize()方法序列化表单值，然后附加到URL中，将数据发送到后台。在Controller层，接收到这些参数并进行处理，返回更新员工信息的页面。

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

主要通过window.location.href发送请求，如在按钮点击事件中，点击按钮，就会像employee/toUpdateEmployee发送请求。

<script type="text/javascript">
		$(document).ready(function() {
			$("#btnUpdate").click(function(){
				window.location.href = "${ctx}/employee/toUpdateEmployee" ;
			});
		});
</script>

若要将表单数据一并发送到后台，可以使用serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
javascript代码

<script type="text/javascript">
		$(document).ready(function() {
			$("#btnUpdate").click(function(){
				var id = $("tr.selected").find('td.id').text();
				var e = $("#searchForm").serialize(); //searchForm为表单id
				window.location.href = "${ctx}/employee/toUpdateEmployee?id=" + id + "&e=" + e;
			});
		});
</script>

Controller层代码

 @RequestMapping(value = "toUpdateEmployee")
    public String updateEmployee(Employee e, String id, HttpServletRequest request, Model model) {
        if(id == null || id == "") {
            addMessage(model, "请选择一条数据" );
            return "redirect:" + adminPath + "/employee/list?repage";
        }
        Employee employee = employeeService.getEmployeeById(id);
        model.addAttribute("e",e);
        model.addAttribute("employee",employee);
        return "modules/employee/employeeUpdate";
    }