【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