【TP5.1】ES6 ajax返回字符串拼接

author：咔咔

wechat：fangkangfk

注意传值方式，在以前认为使用ajax只是做无刷新使用，今天查资料发现ajax的作用还有防止扒站小工具进行信息的扒取

比如这是我们需要拼接的数据

  

   

    

     

    
    

     
     <table>
     
    
   

    

     

    
    

     
         <td>
     
    
   

    

     

    
    

     

                   我是咔咔
     
    
   

    

     

    
    

     
         </td>
     
    
   

    

     

    
    

     
     </table>
     
    
  
 

传统的写法

  

   

    

     

    
    

     

      <script type="text/javascript">
     
    
   

    

     

    
    

     
         var kaka = '我是咔咔'
     
    
   

    

     

    
    

     
         var html = '<table>';
     
    
   

    

     

    
    

     

               html += '<td>'+kaka;
     
    
   

    

     

    
    

     

               html += '<td>';
     
    
   

    

     

    
    

     

               html += '<table>';
     
    
   

    

     

    
    

     

      </script>
     
    
  
 

es6的写法

  

   

    

     

    
    

     

       <script type="text/javascript">
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
         var es6html =
     
    
   

    

     

    
    

     
             `
     
    
   

    

     

    
    

     

       <table>
     
    
   

    

     

    
    

     

       <td>
     
    
   

    

     

    
    

     

       ${kaka}
     
    
   

    

     

    
    

     

       </td>
     
    
   

    

     

    
    

     

       </table>
     
    
   

    

     

    
    

     

       `;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

       </script>
     
    
  
 

打印：

给你们献上一份源码

  

   

    

     

    
    

     

      function LoadingInfo(page_index, page_size) {
     
    
   

    

     

    
    

     
    var search_text = $("#search_text").val();
     
    
   

    

     

    
    

     
    // 就是保护数据
     
    
   

    

     

    
    

     

          $.ajax({
     
    
   

    

     

    
    

     
      type: "post",
     
    
   

    

     

    
    

     
      url: "{:url('admin/auth/userlist')}",
     
    
   

    

     

    
    

     
      data: {
     
    
   

    

     

    
    

     
        "page_index": page_index,
     
    
   

    

     

    
    

     
        "page_size": $("#showNumber").val(),
     
    
   

    

     

    
    

     
        "search_text": search_text
     
    
   

    

     

    
    

     

            },
     
    
   

    

     

    
    

     
      success: function(data) {
     
    
   

    

     

    
    

     
        var html = '';
     
    
   

    

     

    
    

     
        console.log(data);
     
    
   

    

     

    
    

     
        if (data["data"].length > 0) {
     
    
   

    

     

    
    

     
          for (var i = 0; i < data["data"].length; i++) {
     
    
   

    

     

    
    

     
            // es6 写法 ``
     
    
   

    

     

    
    

     

                  html += `<tr align="center">
     
    
   

    

     

    
    

     

       <td>
     
    
   

    

     

    
    

     

       <div class="cell">
     
    
   

    

     

    
    

     

       <label><input name="sub" type="checkbox" value="${data['data'][i]['uid']}" ></label>
     
    
   

    

     

    
    

     

       </div>
     
    
   

    

     

    
    

     

       </td>
     
    
   

    

     

    
    

     

       <td>
     
    
   

    

     

    
    

     

       `;
     
    
   

    

     

    
    

     
            if (data["data"][i]["user_headimg"] == "") {
     
    
   

    

     

    
    

     

                      html += `<img src="__PUBLIC__/static/picture/default_user_portrait.gif" class="head-portrait"/>`;
     
    
   

    

     

    
    

     

                  } else {
     
    
   

    

     

    
    

     

                      html += `<img src="${data["data"][i]["user_headimg"]}" class="head-portrait"/>`;
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     

                  html += `
     
    
   

    

     

    
    

     

       </td>
     
    
   

    

     

    
    

     

       <td class="tal">${data["data"][i]["user_name"]}</td>
     
    
   

    

     

    
    

     

       <td class="tal">${data["data"][i]["user_tel"]}</td>
     
    
   

    

     

    
    

     

       <td class="tal">${data["data"][i]["user_email"]}</td>
     
    
   

    

     

    
    

     

       <td class="tal">${data["data"][i]['user_role']['user_group']["group_name"]}</td>
     
    
   

    

     

    
    

     

       `;
     
    
   

    

     

    
    

     

                  html += data["data"][i]["user_status"] == 0 ? '<td style="color:red;">锁定</td>' : '<td style="color:green;">正常</td>';
     
    
   

    

     

    
    

     
            if (data['data'][i]['user_role']['is_role'] == 1) {
     
    
   

    

     

    
    

     

                    html += '<td>-</td>';
     
    
   

    

     

    
    

     

                  } else {
     
    
   

    

     

    
    

     

                    html += `
     
    
   

    

     

    
    

     

       <td><a href="http://tp.23673.com/admin/auth/edituser?uid=${data["data"][i]["uid"]}">修改</a>&nbsp;&nbsp;
     
    
   

    

     

    
    

     

       `;
     
    
   

    

     

    
    

     

                    html += data["data"][i]["user_status"] == 0 ? '<a href="javascript:void(0);" onclick="unlock(' + data["data"][i]["uid"] + ', 1)">解锁</a>&nbsp;&nbsp; ' : '<a href="javascript:void(0);" onclick="lock(' + data["data"][i]["uid"] +
     
    
   

    

     

    
    

     
                ', 0)">锁定</a>&nbsp;&nbsp; ';
     
    
   

    

     

    
    

     

                    html += '<a href="javascript:void(0);" onclick="resetPassword(' + data["data"][i]["uid"] + ')">重置密码</a>';
     
    
   

    

     

    
    

     

                    html += '&nbsp;&nbsp;<a href="javascript:;" onclick="delectAdminUser(' + data["data"][i]["uid"] + ')">删除</a></td>';
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     

                  html += '</tr>';
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
            // 传统方式js 字符串拼接
     
    
   

    

     

    
    

     
            // html += '<tr align="center">';
     
    
   

    

     

    
    

     
            // html += '<td><div class="cell"><label><input name="sub" type="checkbox" value="' + data['data'][i]['uid'] + '" ></label></div></td>';
     
    
   

    

     

    
    

     
            // html += '<td>';
     
    
   

    

     

    
    

     
            // if (data["data"][i]["user_headimg"] == "") {
     
    
   

    

     

    
    

     
            // html += '<img src="../../static/picture/default_user_portrait.gif" class="head-portrait" />';
     
    
   

    

     

    
    

     
            // } else {
     
    
   

    

     

    
    

     
            // html += '<img src="../../static/picture/2d604321d826415eb3cb495b5e793f6c.gif' + data["data"][i]["user_headimg"] + '" class="head-portrait" />';
     
    
   

    

     

    
    

     
            // }
     
    
   

    

     

    
    

     
            // html += '</td>';
     
    
   

    

     

    
    

     
            // html += '<td class="tal">' + data["data"][i]["admin_name"] + '</td>';
     
    
   

    

     

    
    

     
            // html += '<td class="tal">' + data["data"][i]["user_tel"] + '</td>';
     
    
   

    

     

    
    

     
            // html += '<td class="tal">' + data["data"][i]["user_email"] + '</td>';
     
    
   

    

     

    
    

     
            // html += '<td class="tal">' + data["data"][i]["group_name"] + '</td>';
     
    
   

    

     

    
    

     
            // html += data["data"][i]["user_status"] == 0 ? '<td style="color:red;">锁定</td>' : '<td style="color:green;">正常</td>';
     
    
   

    

     

    
    

     
            // if (data['data'][i]['is_admin'] == 1) {
     
    
   

    

     

    
    

     
            // html += '<td>-</td>';
     
    
   

    

     

    
    

     
            // } else {
     
    
   

    

     

    
    

     
            // html += '<td><a href="http://tp.23673.com/admin/auth/edituser?uid=' + data["data"][i]["uid"] + '">修改</a>&nbsp;&nbsp; ';
     
    
   

    

     

    
    

     
            // html += data["data"][i]["user_status"] == 0 ? '<a href="javascript:void(0);" onclick="unlock(' + data["data"][i]["uid"] + ', 1)">解锁</a>&nbsp;&nbsp; ' : '<a href="javascript:void(0);" onclick="lock(' + data["data"][i]["uid"] +
     
    
   

    

     

    
    

     
            // ', 0)">锁定</a>&nbsp;&nbsp; ';
     
    
   

    

     

    
    

     
            // html += '<a href="javascript:void(0);" onclick="resetPassword(' + data["data"][i]["uid"] + ')">重置密码</a>';
     
    
   

    

     

    
    

     
            // html += '&nbsp;&nbsp;<a href="javascript:;" onclick="delectAdminUser(' + data["data"][i]["uid"] + ')">删除</a></td>';
     
    
   

    

     

    
    

     
            // }
     
    
   

    

     

    
    

     
            // html += '</tr>';
     
    
   

    

     

    
    

     

                }
     
    
   

    

     

    
    

     

              } else {
     
    
   

    

     

    
    

     

                html += '<tr align="center"><th colspan="6">暂无符合条件的数据记录</th></tr>';
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

              $(".style0list tbody").html(html);
     
    
   

    

     

    
    

     
        initPageData(data["page_count"], data['data'].length, data['total_count']);
     
    
   

    

     

    
    

     

              $("#pageNumber").html(pagenumShow(jumpNumber, $("#page_count").val(), 5));
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          });
     
    
   

    

     

    
    

     

        }
     
    
  
 

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/83902269