mvc实现前后端数据交互(子页面赋值父页面)

小七.布灵

已于 2022-06-21 00:56:09 修改

阅读量987

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端技术 Java 全栈工程师文章标签： java mvc jsp springboot html

于 2019-06-27 13:39:58 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/k_love1219/article/details/93844817

本文介绍了在Java SpringBoot MVC框架下，如何实现前后端数据交互的完整流程，包括前端检索、后端接收及返回页面的数据操作。提供了一个代码示例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你知道的越多，你不知道的越多；本文仅做记录，方便以后备阅。希望也能帮到正在看这篇文章的你。

相信大家在编程过程中都已经轻车熟路的掌握了前后端数据进行交互的各种示例，今天我来给大家分享一下mvc前后端交互数据的一整套流程。

代码demo示例如下：

步骤1:前端检索代码

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<from>
	<input style="height: 26px;width: 98%;" type="text" name="code" id="code" title="编号"/>
	<input style="height: 26px;width: 98%;" type="text" name="xm" id="xm" title="姓名"/>
	<a id="xz" style="height: 20px;" title="选择" onclick="getPartsList()">选择</a>
	<a id="addmaterial" style="height: 20px;"  title="入库提交" onclick="submitMatel()">入库提交</a>
	<table id="simple-table" style="margin-top:5px;">	
	<thead>
		<tr>
			<th class="th" style="width:36px;">
			<label class="pos-rel"><input type="checkbox" class="ace" id="zcheckbox" /><span class="lbl"></span></label>
			</th>
			<th class="th">编号</th>     
			<th class="th">姓名</th> 
			<th class="th">性别</th>     
			<th class="th">职务</th> 
			<th class="th">单位</th>  
			<th class="th">爱好</th> 
			<th class="th">备注</th> 
			<th class="th">分条目</th>
		</tr>
	</thead>							
	<tbody id="trcodes">
		<!-- 开始循环 -->	
		<c:choose> 
			<c:when test="${not empty varList}">
				<c:if test="${QX.cha == 1 }">
					<c:forEach items="${varList}" var="var" varStatus="vs">
						<tr>
							<td class='th' style="width: 36px;">
								<label class="pos-rel"><input type='checkbox' name='ids' value="${var.code}" class="ace" /><span class="lbl"></span></label>
							</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
							<td class='th'>${
   
   var.CW_DATE}</td>
						</tr>
					</c:forEach>
				</c:if>
				<c:if test="${QX.cha == 0 }">
					<tr>
						<td colspan="100" class="center">您无权查看</td>
					</tr>
				</c:if>
		</c:when>
		<c:otherwise>
			<tr class="main_info">
				<td colspan="100" class="center" >没有相关数据</td>
			</tr>
		</c:otherwise>
	</c:choose>
	</tbody>
	</table>
</from>
<!--提示框-->
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
<script type="text/javascript" src="static/js/layer/layer.js"></script>
<script type="text/javascript">
	//提交
	function getPartsList(){
   
   
		var code=$("#code")