bootstrap經過ajax請求JSON數據後填充到模態框

時間 2019-11-16

標籤 bootstrap 經過 ajax 請求 json 數據填充模態欄目 Bootstarp 简体版

原文原文鏈接

1. JSP頁面中準備模態框javascript

            <!-- 詳細信息模態框（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">&times;</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">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;稱</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">存&nbsp;放&nbsp;地&nbsp;點</span>
                                        <input type="text" class="form-control"
                                            placeholder="請輸入存放地點名稱" id="address1"
                                            readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">使&nbsp;用&nbsp;部&nbsp;門</span>
                                        <input type="text" class="form-control"
                                            placeholder="請輸入使用部門名稱" id="department1"
                                            readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">單&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</span>
                                        <input type="text" class="form-control" placeholder="請輸入單位名稱"
                                            id="unit1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">數&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量</span>
                                        <input type="text" class="form-control" placeholder="請輸入數量"
                                            id="number1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">單&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;價</span>
                                        <input type="text" class="form-control" placeholder="請輸入單價"
                                            id="price1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;額</span>
                                        <input type="text" class="form-control" placeholder="請輸入金額"
                                            id="totalprice1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">來&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源</span>
                                        <input type="text" class="form-control" placeholder="請輸入來源"
                                            id="come1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">購&nbsp;建&nbsp;日&nbsp;期</span>
                                        <input type="text" class="form-control" placeholder="請輸入購建日期"
                                            id="buytime1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">使&nbsp;&nbsp;&nbsp;用&nbsp;&nbsp;&nbsp;人</span>
                                        <input type="text" class="form-control" placeholder="請輸入使用人名稱"
                                            id="useperson1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">經&nbsp;&nbsp;&nbsp;辦&nbsp;&nbsp;&nbsp;人</span>
                                        <input type="text" class="form-control" placeholder="請輸入經辦人名稱"
                                            id="handleperson1" readonly="readonly">
                                    </div>
                                    <br />
                                    <div class="input-group">
                                        <span class="input-group-addon">管&nbsp;&nbsp;&nbsp;理&nbsp;&nbsp;&nbsp;員</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請求數據)html

<a class="queryA" href="javascript:void(0)" onclick="query(${register.id})"> <span
                                    class="glyphicon glyphicon-search"></span>
                            </a>

3.JS處理按鈕點擊事件java

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.後臺接收請求返回JSONajax

    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 = request.getParameter("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.parseInt(request.getParameter("id"));
        Register register = service.getRegisterById(id);
        Gson gson = new Gson();
        String json = gson.toJson(register);
        System.out.println(json);
        response.getWriter().write(json);
    }

結果:json

{"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.最終效果:async

{"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"}post