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

在做页面的时候为了使页面美化,我们经常会用拼接字符串的方式,动态加载后台的数据,这里我们使用的前台框架是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))

时间: 2024-10-10 06:17:07

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

ios网络学习------4 UIWebView的加载本地数据的三种方式

UIWebView是IOS内置的浏览器,可以浏览网页,打开文档  html/htm  pdf   docx  txt等格式的文件.  safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): - (void)viewDidLoad { [super viewDidLoad]; [self setupUI]; NSString *path = [[NSBund

Android中插件开发篇之----动态加载Activity(免安装运行程序)

一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析),没看过的同学,可以转战: http://blog.csdn.NET/jiangwei0910410003/article/details/47679843 当然,今天说道的内容还这这篇文章有关系.关于动态加载Activity的内容,网上也是有很多文章介绍了.但是他们可能大部分都是介绍通过代理的方

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面 从数据库中查询仓库信息,显示在下拉菜单中: 首先,引入js插件,这里使用jquery-1.8.3.js <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> 当页面加载完成后,就应该发送ajax请求到数据库,

web页面动态加载UserControl,并调用用户控件中的方法来初始化控件

1,HTML页 头部注册: <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/CeShiBu.ascx" TagPrefix="UserControl" TagName="CeShiBu"%> <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/KaiFaBu.ascx" TagPrefix=&quo

(ViewPager+Fragment)动态加载、删除页面,Fragmen中嵌套使用ViewPager

1.(ViewPager+Fragment)动态加载.删除页面 a.首先adapter要继承FragmentStatePagerAdapter. b.在PagerAdatpar重写getItemPosition(),return POSITION_NONE 即可每次刷新加载图面. 2.Fragmen中嵌套使用ViewPager 和activity中一样使用,将传入的getSupportFragmentManager替换成getChildFragmentManager即可.

动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

iOS中如何在欢迎界面中动态加载广告

当我们打开一款应用程序的时候,首先映入眼帘的往往并不是程序的主界面,而是经过精心设计的欢迎界面,这个界面通常会停留几秒钟,然后消失.看似很平常的一个小小的欢迎界面,其实还大有讲究. 一 为什么会有欢迎界面呢? 这是因为程序在启动的过程中需要消耗一些时间,那么在加载出现主界面之前,会出现短暂的黑屏,这实在是很糟糕的一件事情,会给用户一个非常不好的体验.为了缓解用户等待过程中心理的不适与烦躁,欢迎界面闪亮登场了! 用欢迎界面来替代黑屏的等待,可以有效的掩盖耗时阻塞的后台操作,还能向用户展示有效的信息

zTree 从数据库中动态加载树形菜单

这几天做动态菜单用到了这个插件,目前用的很广泛的一个开源框架,最新发布的QUI框架就是用这个插件开发的菜单部分,因此还是很值得深入研究和学习,通过使用感觉功能很丰富,好多函数不用自己开发和编写,官网上有很详尽的API可以参考,用着算顺手但学习使用的过程中也遇到了一些困难,听过反复测试和查资料都理解了,但也在思考一个问题,怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程度? 这个不仅仅是一个树形结构的菜单,每个节点左边可以有一个复选框,看了看也挺简单的,只需要在setting里面配置一个ch