Ajax接收后台的对象，传值到bootstrap模态框中

任务：查看表格中某条记录的详情信息。

 

大致需要5个步骤，核心是将对象转化为json，然后去给模态框赋值。

对于模态框赋值，网上的很多方法都是在页面间传值，也就是说用 document.getelementbyid 获取已有标签的值，然后传给模态框，感觉很笨重。。。并且，像 查看详情 这种功能，模态框中想要展示的信息数量上要比原页面中多，这种方法就是不奏效的，因为它没地方去获取。

所以，直接从后台传入自定义内容的json要更好，如果需要的话，还可以利用DTO返回多个数据库中的信息到模态框中。

1. jsp页面中准备模态框

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 模态框（Modal） -->
<div class="modal fade" id="my_Modal" >
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-body">
                <div class="card-body">

                    <label>姓名</label>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-user"></i></span>
                        </div>
                        <input type="text" id="name" class="form-control" readonly="readonly">
                    </div>

                    <label>邮箱</label>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                        </div>
                        <input type="email" id="email" class="form-control" readonly="readonly">
                    </div>

                    <label>电话</label>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-phone"></i></span>
                        </div>
                        <input type="tel" id="phone" class="form-control" readonly="readonly">
                    </div>
                    
                    <label>地址</label>
                    <div class="input-group mb-3">

                        <textarea id="address" class="form-control" rows="6" readonly="readonly"></textarea>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-body -->
        </div><!-- /modal-content -->
    </div> <!-- /modal-dialog -->
</div><!-- /.modal -->

要注意的，模态框的id名为 my_Modal。

 

 

2. 设置出发模态框的按钮

<button  data-toggle="modal" data-target="#my_Modal" onclick="test(${customer.id})"> 详情 </button>

要注意的，data-target指向模态框id名，也就是 my_Modal ；触发函数 test 中携带对象的主键id

 

 

3. js处理按钮点击事件

//查看详情
function test(id) {
    $.ajax({
        url: "/customer/detail",
        type: "get",
        data: {
            id: id
        },
       success: function (my_json) {
           // 向模态框插入数据并
            $("#name").val(my_json.name);
    		$("#email").val(my_json.email);
    		$("#phone").val(my_json.phone);
    		$("#address").val(my_json.address);
    		// 显示模态框
    		$('#my_Modal').modal('show');   
           
        },
        error: function () {
            alert("返回到ajax的error函数中")
        },
        dataType : "json"

    });
}

要注意的：给模态框用 $("#email").val(data.email); 赋值时，前面的email必须是id属性，不能是name属性

 

 

4. 后端controller层的代码

/**
    * 查询细节
*/
@RequestMapping(value = "/detail", method = RequestMethod.GET)
public void queryAll(@RequestParam("id") Long id,   // 表单验证
                        HttpServletResponse response) throws IOException {

    Customer customer = customerService.queryById(id);  // 根据主键到数据库中查询查询
    response.setCharacterEncoding("utf-8");  //这里不设置的话，中文传到页面上会变成问号
    Gson gson = new Gson();    // 将数据库对象转化为json，需要在pom中导入依赖
    String json = gson.toJson(customer);   // 装载
    // System.out.println(json);   // 会输出json串
    response.getWriter().write(json);   // 将json写到response中
}

 

 

5. pom.xml添加依赖

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.1</version>
</dependency>

运行前更新一下pom

 

 

结果

点击 详情 按钮后，弹出下面的窗口。