在做页面的时候为了使页面美化,我们经常会用拼接字符串的方式,动态加载后台的数据,这里我们使用的前台框架是bootstrap,但是很多效果还是要用jquery来实现
(1)方法传参与字符串的拼接 (拼接用的replace)
先声明一个展示数据的页面模型(使用过的模型1)
var userModel = "<div class=\"itemdiv commentdiv\" style=\"margin-left: 7%;\">"+ "<div class=\"row text-left\" style=\"margin-top:5px;\">"+ "<label style=\"color: #737D81;\">用户ID:</label>"+ "<label> {userid}</label>"+ "</div>"+ "<div class=\"row text-left\" style=\"margin-top:5px;\">"+ "<label style=\"color: #737D81;\">姓名:</label>"+ "<label> {username}</label>"+ "<button id=\"{btnId}\" class=\"btn btn-sm btn-info\" style=\"height:30px;margin-left: 20%;\">添加</button>"+ "</div>"+ "<div class=\"row text-left\" style=\"margin-top:5px;\">"+ "<label style=\"color: #737D81;\">电话:</label>"+ "<label> {telephone}</label>"+ "</div>"+ "<div class=\"row\">"+ "<div class=\"hr hr8\"></div>"+ "</div>"+ "</div>"; |
然后ajax加载后台数据,然后使用replace,将数据动态替换到页面模型中
$.ajax({ url:‘<%=basePath%>platform/getUserPad.action‘, type : ‘POST‘, dataType : ‘json‘, data :{ user_number : $("#form_searchSecurity").val(), user_name : $("#search_user_name").val(), }, success : function(data) { $.each(data, function(index, element) { //此处替换页面模型中的值 $("#userModelDiv").append(oneUserInfo); //将页面中的值替换好之后,将这些数据插入页面中需要放这些数据处的div中 document.getElementById(‘btnId‘+index).onclick = function() { //动态添加事件,若在每条数据的后面要添加件事传参,此方式可传一个对象过去 } //或者是在页面中定义方法,此处传不同参数,同样使用replace方法 }); } function addNumberBySearch(element){ |
拼接字符串的时候,遇到传值的问题,可选择方法传值(可以在button里面onclick=aa(参数1,参数2))