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

今天写一个简单的项目用到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/[email protected]/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的值。

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

点击修改按钮

控制台输出

页面跳转如下：

运行成功。

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

猜你喜欢