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));
      }
    });
  }