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