【Java】JavaScript实现以form表单提交表格的数据到后端

九点两刻

于 2024-09-29 16:02:24 发布

阅读量142

点赞数 1

分类专栏： Java 文章标签： java javascript 状态模式

本文链接：https://blog.csdn.net/YM_ZFJ/article/details/142637218

版权

Java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript实现以form表单的形式提交表格的数据到后端，前端的代码如下：

1.前端HTML代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/style.css"/>
	<link rel="stylesheet" href="assets/css/ace.min.css" />
	<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
	<link href="assets/css/codemirror.css" rel="stylesheet">
	<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
	<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="assets/js/ace-extra.min.js"></script>
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/dist/echarts.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
	<script src="assets/layer/layer.js" type="text/javascript" ></script>
	<script src="assets/laydate/laydate.js" type="text/javascript"></script>
 <title>板卡信息</title>
 </head>		
<body>
<div class="tab-content">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
	<th width="40">槽位号</th>
	<th width="90">板卡IP地址</th>
	<th width="60">操作</th>
</tr>
</thead>
<tbody th:each="item, stat : ${dataArray}" th:count="${stat.index} < 16">			
<tr height="8">
<td th:text="${item.boardSlotIndex[stat.index + 15]}"></td>
<td th:text="${item.boardSlotIP[stat.index + 15]}"></td>
<td><a onclick="testform(this)" title="属性"  class="btn btn-xs btn-success">属性</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

2.前端JavaScript代码：

/**
	 * form表单提交表格数据
	 */
	function testform(evt) {
		var url = "display_attribute";//后端跳转路径
		var curtd = $(evt).parent().parent().find("td");
		var paraData = {
			"deviceIP":curtd.eq(1).text(),
		};
		var form = $("<form method='post'></form>");
		form.attr({"action":url});
		console.log(paraData);
		for (arg in paraData){
			var input = $("<input type='hidden'>");
			input.attr({"name":arg});
			input.val(paraData[arg]);
			form.append(input);
			console.log(input)
		}
		$("body").append(form);
		console.log(form);
		form.submit();
	}

3.后端代码如下：

@RequestMapping("/display_attribute")
    public String displayAttribute(@RequestParam("deviceIP") String deviceIP, ModelMap map) {}

九点两刻

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录