2020-09-02利用Ajax请求数据并在模态框展示

后台代码,注意返回值类型是单个结果集,不是集合,如果返回了集合需要遍历否则前台无法解析集合只能解析json

	@RequestMapping("getPersonById")
	public  void   getPersonById(Integer person_id, HttpServletResponse response, Model model) throws IOException {
		Persondesc alarmTask1=personService.getPersonById(person_id);
		model.addAttribute("alarmTask",alarmTask1);
		String alarmTask = JSON.toJSONString(alarmTask1);
		response.getWriter().write(alarmTask);
	}

前台展示代码

   <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">description</span>
                            <input type="text" class="form-control" placeholder="description"
                                   id="description" readonly="readonly">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">skill</span>
                            <input type="text" class="form-control" placeholder="skill"
                                   id="skill" readonly="readonly">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">education</span>
                            <input type="text" class="form-control" placeholder="education"
                                   id="education" readonly="readonly">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">学校</span>
                            <input type="text" class="form-control" placeholder="学校"
                                   id="school" readonly="readonly">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">地址</span>
                            <input type="text" class="form-control" placeholder="地址"
                                   id="address" readonly="readonly">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">工作年份</span>
                            <input type="text" class="form-control" placeholder="工作年份"
                                   id="yearOfWork" readonly="readonly">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">头像</span>
                            <img src="" width='170px' height='100px' id="img">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">照片</span>
                            <img src="" width='170px' height='100px' id="images">

                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">期望薪资</span>
                            <input type="text" class="form-control" placeholder="期望薪资"
                                   id="money" readonly="readonly">
                        </div>
                        <br />
                        <div class="input-group">
                            <span class="input-group-addon">wantCity</span>
                            <input type="text" class="form-control" placeholder="wantCity"
                                   id="wantCity" readonly="readonly">
                        </div>
                        <br />
                    </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>

前台按钮触发以及ajax请求,获取选中行ID的实现方法感觉不是很好,如果有更好的方法欢迎指教

 $("#btn_xq").click(function () {
                var getSelections = $('#table_user').bootstrapTable('getSelections');
                if (getSelections && getSelections.length == 1) {
                    var  a =Object.values(getSelections[0])
                    var b
                    getSelections.forEach(function (a) {
                        b=a.person_id
                    });
                    $.ajax({
                        async : true,
                        cache : false,
                        url : "getPersonById.htm?person_id="+b,
                        // type : "POST",
                        // 成功后开启模态框
                        success:function(data){
                            //将数据回显到弹窗
                            $("#description").val(data.description);
                            $("#skill").val(data.skill);
                            $("#id").val(data.person_id);
                            $("#skill").val(data.skill);
                            $("#education").val(data.education);
                            $("#school").val(data.school);
                            $("#address").val(data.address);
                            $("#yearOfWork").val(data.yearOfWork);
                            $('#img').attr("src",data.img);
                            $('#images').attr("src",data.images);
                            $("#money").val(data.money);
                            $("#wantCity").val(data.wantCity);
                            // $('#queryInfo').modal({backdrop: 'static', keyboard: false}),
                            $('#queryInfo').modal('show');
                        },
                        error : function() {
                            alert("请求失败");
                        },
                        dataType : "json"
                    });

                } else {
                    $("#select_message").text("请选择其中一条数据");
                    $("#alertmod_table_user_mod").show();
                }

            });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值