今天写一个简单的项目用到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的值。
这时候我们来测试一下程序。
点击修改按钮
控制台输出
页面跳转如下:
运行成功。