bootstrap通过ajax请求JSON数据后填充到模态框
1. html页面中准备模态框
<!-- 详细信息模态框（Modal） -->
<div>
<div class="modal fade" id="queryInfo" 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>
<form
action="${pageContext.request.contextPath }/productServlet?type=info"
method="post">
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">名 称</span>
<input type="text" class="form-control" placeholder="请输入名称"
id="name1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">规格及型号</span> <input
type="text" class="form-control" placeholder="请输入规格及型号"
id="xinghao1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">存 放 地 点</span>
<input type="text" class="form-control"
placeholder="请输入存放地点名称" id="address1"
readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">使 用 部 门</span>
<input type="text" class="form-control"
placeholder="请输入使用部门名称" id="department1"
readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">单 位</span>
<input type="text" class="form-control" placeholder="请输入单位名称"
id="unit1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">数 量</span>
<input type="text" class="form-control" placeholder="请输入数量"
id="number1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">单 价</span>
<input type="text" class="form-control" placeholder="请输入单价"
id="price1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">金 额</span>
<input type="text" class="form-control" placeholder="请输入金额"
id="totalprice1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">来 源</span>
<input type="text" class="form-control" placeholder="请输入来源"
id="come1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">购 建 日 期</span>
<input type="text" class="form-control" placeholder="请输入购建日期"
id="buytime1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">使 用 人</span>
<input type="text" class="form-control" placeholder="请输入使用人名称"
id="useperson1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">经 办 人</span>
<input type="text" class="form-control" placeholder="请输入经办人名称"
id="handleperson1" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">管 理 员</span>
<input type="text" class="form-control" placeholder="请输入管理员名称"
id="admini1" readonly="readonly">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭</button>
<!-- <button type="submit" class="btn btn-primary">提交</button> -->
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
2.准备点击请求json数据的按钮(带着id请求数据)
<a class="queryA" href="javascript:void(0)" onclick="query(${register.id})"> <span
class="glyphicon glyphicon-search"></span>
</a>
3.JS处理按钮点击事件
function query(id) {
alert('ajax请求之前');
$.ajax({
url : "/small/productServlet",
async : true,
type : "POST",
data : {
"type" : "query",
"id" : id
},
// 成功后开启模态框
success : showQuery,
error : function() {
alert("请求失败");
},
dataType : "json"
});
}
// 查询成功后向模态框插入数据并开启模态框。data是返回的JSON对象
function showQuery(data) {
$("#name1").val(data.name);
$("#xinghao1").val(data.xinghao);
$("#address1").val(data.address);
$("#department1").val(data.department);
$("#unit1").val(data.unit);
$("#number1").val(data.number);
$("#price1").val(data.price);
$("#totalprice1").val(data.totalprice);
$("#come1").val(data.come);
$("#buytime1").val(data.buytime);
$("#useperson1").val(data.useperson);
$("#handleperson1").val(data.handleperson);
$("#admini1").val(data.admini);
// 显示模态框
$('#queryInfo').modal('show');
}
4.后台接收请求返回JSON
return JsonResponse(dict)
结果
{"id":16,"name":"测试名称16","address":"测试地址2","department":"测试部门2","unit":"测试单位2","number":1,"price":1.5,"totalprice":1.5,"come":"来源2","buytime":"八月 23, 2017","useperson":"使用人2","handleperson":"经办人2","admini":"管理员部门2"}
5.最终效果:
{"id":16,"name":"测试名称16","address":"测试地址2","department":"测试部门2","unit":"测试单位2","number":1,"price":1.5,"totalprice":1.5,"come":"来源2","buytime":"八月 23, 2017","useperson":"使用人2","handleperson":"经办人2","admini":"管理员部门2"}
【当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!】
转自 https://www.cnblogs.com/qlqwjy/p/7421692.html
