ajax + layer 做一个弹出框

首先写一个onclick事件，通过ajax 从后台获取数据 ，返回前台以layer.open 显示数据

遇到的难点： （1） ajax 将点击事件得到的数据传给 controller      （刚学，花了40分钟）

                         （2）controller 将数据返回给 ajax 的 success            （20分钟）

                         （3）layer 自定义修改 弹出框的样式                            （2小时）

代码：

           （1）ajax 传数据给 controller

         

   function showExeDetail(resultId) {
            $.ajax({
                method:"post",
                url:"${ctx}/datavalid/planDoException/findExeDetail",
                data:{'resultId':resultId},
                success:function(exeDetail){
                     layer.open({
            });
        }

           这是以键值对的形式传给controller

           controller代码：

   

@RequestMapping(value = "findExeDetail")
    @ResponseBody
    public String findExeDetail(@RequestParam(value="resultId",defaultValue="") String resultId) {
        PlanDoException planDoException = new PlanDoException();
        planDoException.setResultId(resultId);
        PlanDoException showExeDetail = planDoExceptionService.findExeDetail(planDoException);
        return showExeDetail.getExceptionInfo();
    } 

 

  （2）controller 传数据给 ajax

     返回给ajax 要用 json形式    

      @ResponseBody   

      return showExeDetail.getExceptionInfo();   此时返回一个字符串，以json形式传给ajax

      success:function(exeDetail){
                     layer.open({
            });

     此时 exeDetail 就是之前的 showExeDetail.getExceptionInfo();

    （3）layer 改变样式

      完整代码：

     

  layer.open({
                            type: 1,
                            title:['<span style="color:white;">异常详情</span> ','background-color: #4898d5' ],
                            area: '300px;',
                            shade: 0.5,
                            id: 'LAY_layuipro',
                            moveType: 1,
                            btn: ['关闭'],
                         content: '<div id="exe_detail" class="gray-bg  pace-done" style="padding: 50px;  line-height: 22px; font-weight: bold;" ><p style="word-wrap:break-word; word-break:break-all;">'+exeDetail+'</p></div>',
                            closeBtn:1
                          });

      1.修改 标题的背景，字体颜色

       title:['<span style="color:white;">异常详情</span> ','background-color: #4898d5' ],

       试了很多次，找了很多方式

      2.修改弹出层文字（尤其是文字自动换行）

       自动换行：p style="word-wrap:break-word; word-break:break-all;">'+exeDetail+'</p>

 

效果图：