SpringMVC——通过form表单绑定数据

最新推荐文章于 2024-08-01 00:10:06 发布

一只野生饭卡丘

最新推荐文章于 2024-08-01 00:10:06 发布

阅读量837

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringMVC 文章标签： springmvc form表单绑定数据 controller

本文链接：https://blog.youkuaiyun.com/Searchin_R/article/details/83796781

SpringMVC 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在Web项目中使用form表单进行数据绑定的方法。通过在controller中设置映射，接受并处理参数，然后在jsp页面上实现数据提交，展示了如何从前端收集数据并传递给后端。

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

今天写一个简单的项目用到form表单绑定数据，这里介绍一下方法。

首先需要配置好相应的文件，这个步骤我这里就不再赘述，直接进入主题。

我的controller代码如下：

	 @RequestMapping(value ="views/html_jsp/revise_good",produces = "application/json;charset=utf-8",method ={RequestMethod.GET})
	 public ModelAndView revise_good(HttpServletRequest request, @RequestParam("good_id") int good_id) {
		 ModelAndView mv = new ModelAndView();
		 mv.addObject("good_id",good_id);
		 System.out.println("您已进入revise_good并出数据！"+good_id);
		 mv.setViewName("test");
		 return mv;
		 
	 }

这里设置了相应的映射（通过该映射将进入此方法），并接受名为good_id的参数，赋值给good_id,并通过addObject方法以键值对的形式添加，再输出一个语句，表示进入了该方法，最后再return回去test.jsp页面。

接下来再写一个提交数据的jsp页面。

下面是我的html代码（只包含重要部分代码）：

<div class="seller_good">
	<a href="#"><img class="shoe_img" id="shoe_img" src="${good_1_pic}" name="8"></img></a>
	<div id="revise" >修改</div>					
	<form:form id="revise_form"  action="http://localhost:8080/Takout/views/html_jsp/revise_good" method="get">
	    <input id="revise_good_id" type="text" name="good_id"></input>
	</form:form>
</div>

下面为js代码：

$("#revise").click(function(){
	
	alert("修改商品");
	 var obox=this.parentNode;//获取当前元素的父div，即seller_good
     var lis=obox.children;//lis是当前seller_good的子元素们
    //lis[0].children 是img元素
   	var good_id=$(lis[0].children).attr('name');
 
	$("#revise_good_id").val(good_id);
	//提交表单
  	$("#revise_form").submit();
})

上面的代码中，我写了一个内容为“修改”的div（revise），我将通过点击它获取shoe_img的name值并将该值赋给input的value，并提交表单。

action="http://localhost:8080/Takout/views/html_jsp/revise_good" method="get"

form表单中的action将映射到相应的controller中。

随后，再写一个跳转页面test.jsp。

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@page isELIgnored="false"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="<%=basePath %>views/js/jquery.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  



<link rel="stylesheet" type="text/css"href="<%=basePath %>views/css/project2.css">
<body>
${good_id}
</body>
</html>

通过el语句${good_id}获取到good_id的值。

这时候我们来测试一下程序。