LuckyChend 2017-08-19 08:28 采纳率: 40%
浏览 991
已采纳

求大神优化前端js代码

今天已经发过一个帖子了,因为最近发现自己的jsp文件打开后很卡,可能是因为js代码写的太垃圾了,主要就是ajax里面写的重复代码太多了,很感谢中午网友热心的帮我优化,下面这个是js拼接html代码的,感觉这样写太垃圾了,求大神优化下。。。

    //加载客户参课记录
    function loadcankejilu(){
        var content = '';
        $.ajax({
                cache: true,
                type: "POST",
                dataType:'json',
                url:'/hszx/queryCankejilu.do',
                data:{C_ID:$('#currentCID').val()},
                async: false,
                success: function(data) {
                            var content = ' <table class="table table-border table-bordered table-bg table-hover table-sort;">'
                                        +'              <tr>'
                                        +'                  <td colspan="7">'
                                        +'                      <input type = "button" class="btn btn-primary" value = "报名" onclick="baomingpre()"/>'
                                        +'                      <input type = "button" id="baoming" style="display: none"  data-toggle="modal" data-target="#myModal6"/>'
                                        +'                  </td>'
                                        +'              </tr>'
                                        +'              <tr>'
                                        +'                  <th colspan="7"></th>'
                                        +'              </tr>'
                                        +'              <tr>'
                                        +'                  <th>参课人</th>'
                                        +'                  <th>课程名称</th>'
                                        +'                  <th>开课地点</th>'
                                        +'                  <th>报名价格</th>'
                                        +'                  <th>开课时间</th>'
                                        +'                  <th>课程状态</th>'
                                        +'                  <th>报名来源</th>'
                                        +'              </tr>';
                    var dataObj = data;
                    $.each(dataObj,function(index,item){
                        content+='  <tr>'
                                +'      <td>'+item.ct_NAME+'</td>'
                                +'      <td>'+item.sp_NAME+'</td>'
                                +'      <td>'+item.sp_ADDRESS+'</td>'
                                +'      <td>'+item.cp_MONEY+'</td>'
                                +'      <td>'+item.sp_STIME+'</td>'
                                +'      <td>'+item.sp_STATE+'</td>'
                                +'      <td>'+item.si_SIGNSTATE+'</td>'
                                +'  </tr>';
                    })
                    if(dataObj==''){
                        content+='<tr style="height:100px"><td  style="text-align:center;height:100px;" colspan="7">无参课记录<td></tr>';
                    }
                    content+'</table>';
                    $('#ckjl').html(content);
                }
            });
  • 写回答

10条回答 默认 最新

  • Go 旅城通票 2017-08-19 13:45
    关注
      var content = ' <table class=
    

    这个没办法优化了,除非你服务器端IO读取模板内容一起返回就不需在客户端拼接了$.each也没办法优化,因为你有顺序,你这个代码没有什么特别好优化的
    可以订阅个列隐射,map,for下简化代码了

    
        function loadcankejilu() {
            var content = '';
            var fields = [{ n: '参课人', f: 'ct_NAME' }, { n: '课程名称', f: 'sp_NAME' }, { n: '开课地点', f: 'sp_ADDRESS' }, { n: '报名价格', f: 'cp_MONEY' }, { n: '开课时间', f: 'sp_STIME' }, { n: '课程状态', f: 'sp_STATE' }, { n: '报名来源', f: 'si_SIGNSTATE' }, ]
            $.ajax({
                cache: true,
                type: "POST",
                dataType: 'json',
                url: '/hszx/queryCankejilu.do',
                data: { C_ID: $('#currentCID').val() },
                async: false,
                success: function (data) {
                    var content = ' <table class="table table-border table-bordered table-bg table-hover table-sort;">'
                                + '              <tr>'
                                + '                  <td colspan="7">'
                                + '                      <input type = "button" class="btn btn-primary" value = "报名" onclick="baomingpre()"/>'
                                + '                      <input type = "button" id="baoming" style="display: none"  data-toggle="modal" data-target="#myModal6"/>'
                                + '                  </td>'
                                + '              </tr>'
                                + '              <tr>'
                                + '                  <th colspan="7"></th>'
                                + '              </tr>'
                                + '              <tr>'
                                + $(fields).map(function () { return '<th>' + this.n + '</th>' }).get().join('')
                                + '              </tr>';
                    if (data&&data.length)//不用再申明个dataobj,没必要
                        $.each(data, function (index, item) {
                            content += '  <tr>';
                            for (var i = 0; i < fields.length; i++) content += '<td>' + item[fields[i].f] + '</td>';
                            content += '  </tr>';
                        })
                    else content += '<tr style="height:100px"><td  style="text-align:center;height:100px;" colspan="7">无参课记录<td></tr>';
    
                    content + '</table>';
                    $('#ckjl').html(content);
                }
            });
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(9条)

报告相同问题?

悬赏问题

  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸,chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源