bootstrap通过ajax请求JSON数据后填充到模态框1.  JSP页⾯中准备模态框
<!-- 详细信息模态框（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="${tPath }/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").alprice);
$("#come1").val(datae);
$("#buytime1").val(data.buytime);
$("#useperson1").val(data.useperson);
$("#handleperson1").val(data.handleperson);
$("#admini1").val(data.admini);
// 显⽰模态框
$('#queryInfo').modal('show');
}
4.后台接收请求返回JSON
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
RegisterService service = new RegisterServiceImpl();
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String type = Parameter("type");
if (type != null && "add".equals(type)) {
try {
this.add(request, response, service);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if (type != null && "query".equals(type)) {
try {
this.query(request, response, service);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
public void query(HttpServletRequest request, HttpServletResponse response, RegisterService service)
throws Exception {
Integer id = Integer.Parameter("id"));
Register register = RegisterById(id);
Gson gson = new Gson();
String json = Json(register);
System.out.println(json);
发送ajax请求的步骤
}
结果:
{"id":16,"name":"测试名称16","address":"测试地址2","department":"测试部门2","unit":"测试单位2","number":1,"price":1.5,"totalprice":1.5,"come":"来源2","buytime":"⼋⽉ 23, 2017","useperson": 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"}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。