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

谁践踏了优雅 2022-04-18 02:08 212阅读 0赞

今天写一个简单的项目用到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代码（只包含重要部分代码）：

下面为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的值。

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

![20181107005925225.png][]

点击修改按钮

控制台输出![20181107010026638.png][]

页面跳转如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlYXJjaGluX1I_size_16_color_FFFFFF_t_70][]

运行成功。

[20181107005925225.png]: /images/20220418/afd6b125e95143e18d76186859c63458.png
[20181107010026638.png]: /images/20220418/fbccc2e57efb480caf2a99e49b35cdbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NlYXJjaGluX1I_size_16_color_FFFFFF_t_70]: /images/20220418/7056fc81566c4d6dac7a9cc4cf6eac6a.png