在页面中使用拼接字符串的方式显示动态加载的数据

时间:2024-03-08 20:33:01

在做页面的时候为了使页面美化,我们经常会用拼接字符串的方式,动态加载后台的数据,这里我们使用的前台框架是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>&nbsp;&nbsp;{userid}</label>"+
"</div>"+
"<div class=\"row text-left\" style=\"margin-top:5px;\">"+
"<label style=\"color: #737D81;\">姓名:</label>"+
"<label>&nbsp;&nbsp;{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>&nbsp;&nbsp;{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) {

    //此处替换页面模型中的值
var oneUserInfo = userModel.replace(/{userid}/g,element.userid).replace(/{username}/g,element.username)
.replace(/{telephone}/g,element.telephone)
.replace(/{btnId}/g,\'btnId\'+index);         //给button设置动态ID,不需要可不设置


$("#userModelDiv").append(oneUserInfo);   //将页面中的值替换好之后,将这些数据插入页面中需要放这些数据处的div中


document.getElementById(\'btnId\'+index).onclick = function() {         //动态添加事件,若在每条数据的后面要添加件事传参,此方式可传一个对象过去
addNumberBySearch(element);                        //调用这个方法,把对象传过去,

}

 

//或者是在页面中定义方法,此处传不同参数,同样使用replace方法

 

});

}
});

 

function addNumberBySearch(element){
//在此方法中添加操作
element.userid          //获取属性值
}

      拼接字符串的时候,遇到传值的问题,可选择方法传值(可以在button里面onclick=aa(参数1,参数2))

 

 

 

 

 

 

 

 

   

 

相关文章