情景描述:
点击页面“查看”按钮,弹出一个对话框(模态框),模态框中的数据来源于后台(java)。
头部引入
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
.......省略
{参数:<c:forEach items="goodList"var="goods”,goods是后台返回的list的别名,需要放在c:forEach中,用于获取当前对象的id,即{goodList}" var="goods”,goods是后台返回的list的别名,需要放在c:forEach中,用于获取当前对象的id,即goodList"var="goods”,goods是后台返回的list的别名,需要放在c:forEach中,用于获取当前对象的id,即{goods.gId}并将值作为ajax的请求参数,传递给后台。}
<a class="btn btn-default btn-success" role="button" id="editButton" onclick="query(${goods.gId})">查看</a>
<!-- 编辑(Modal)模态框 -->
<div class="modal fade" id="findForm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">编辑</h4>
</div>
<div class="modal-body" id="edit">
<input id="checkOne" type="text" name="goodName"><br />
<input id="checkTwo" type="text" name="goodType"><br />
<input id="checkThird" type="text" name="goodProduct"><br />
<input id="checkFour" type="text" name="goodPrice"><br />
<input id="checkFive" type="text" name="goodNum"><br />
<input id="checkSix" type="text" name="goodNumPrice" id="goodNumPrice"
readonly="readonly">
<script type="text/javascript">
function query(id){
$.ajax({
url:"${basePath}"+"/queryGood/"+id,
type:"post",
data:{
id:id
},
datatype:"json",
success:function(data){
$("#checkOne").val(data.goodName);
$("#checkTwo").val(data.goodType);
$("#checkThird").val(data.goodProduct);
$("#checkFour").val(data.goodPrice);
$("#checkFive").val(data.goodNum);
$("#checkSix").val(data.goodNumPrice);
// 显示模态框
$('#findForm').modal('show');
},
error:function(){
alert("数据传输异常");
}
});
}
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
后台:
//value的值对应ajax的url为 “${basePath}”+"/queryGood/"+id,
//controller中的一个查询方法
@RequestMapping(value="/queryGood/{id}",method=RequestMethod.POST)
@ResponseBody
public JSONObject findGoodById(@PathVariable("id") String id) {
Good good = goodService.findGoodById(Integer.parseInt(id.trim()));
JSONObject jsonObject = JSONObject.fromObject(good);
//将查到的对象转化为json对象,传递给前台ajax sunccess中的data数据。
return jsonObject;
}