注意传值方式，在以前认为使用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> `; html += data["data"][i]["user_status"] == 0 ? '<a href="javascript:void(0);" onclick="unlock(' + data["data"][i]["uid"] + ', 1)">解锁</a> ' : '<a href="javascript:void(0);" onclick="lock(' + data["data"][i]["uid"] + ', 0)">锁定</a> '; html += '<a href="javascript:void(0);" onclick="resetPassword(' + data["data"][i]["uid"] + ')">重置密码</a>'; html += ' <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> '; // html += data["data"][i]["user_status"] == 0 ? '<a href="javascript:void(0);" onclick="unlock(' + data["data"][i]["uid"] + ', 1)">解锁</a> ' : '<a href="javascript:void(0);" onclick="lock(' + data["data"][i]["uid"] + // ', 0)">锁定</a> '; // html += '<a href="javascript:void(0);" onclick="resetPassword(' + data["data"][i]["uid"] + ')">重置密码</a>'; // html += ' <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)); } }); }
