SpringMVC——通過form表單繫結資料
阿新 • • 發佈：2018-11-09
今天寫一個簡單的專案用到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的值。
這時候我們來測試一下程式。
點選修改按鈕
控制檯輸出
頁面跳轉如下：
執行成功。