使用ajax+HTML+servlet实现数据模板填充

数据模板：根据需要，填写好对应参数值，在js中参数值用{}获取，模板如下：

<script type="text/template">

 <li class="comment-list-li" data-user="6e765f8fe9c948682a1d2325d77fef1c" data-id="318287059" data-pos="item" data-href="http://m.uczzd.cn/webapp/comment-detail?uc_param_str=dnnivebichfrmintcpgieiwidsudpf&app=uc-iflow&sn=1111801545443344206&aid=10597163103513334896&commentid=318287059&uc_biz_str=S:custom|C:comment|N:true">
        <div class="commentMain">
            <div class="commentUser clearfix">
                <div class="userInfo ">
                    <div class="userInfoBody">
                        <span class="userName" style="display:none">{BillID}</span>
                        <span class="userName" style="display:none>{OpenID}</span>
                         <span class="userName" style="display:none>{ActivityID}</span>
                        <span class="userName">{NickName}</span>
              
                        <div class="otherInfo clearfix">
                        <span class="dateAndLoch0ate"><b class="time" data-value="1457797788059">{Date}</b></span>
                            
                           
                        </div>
                    </div>
                </div>
                <img class="userImg" src="{Headimgurl}" width="25">
            </div>
            <span class="currentComment commentTextObj" data-text="盘子30个"><span style="color:red">￥{Cost}元</span>，{Describle}</span>
        </div>    
    </li>
   
</script>

上述模板在HTML页面代码中需要填充的位置：

   <ul class="comment-list maincomment-list" id="tableData">
  
              </ul>

接下来是模板复制方法，写到js中：

formatTemplate()模板复制时被调用，功能是在模板将特定的字符替换

function formatTemplate(dta, tmpl) {
		var format = {
			name : function(x) {
				return x
			}
		};
		return tmpl.replace(/{(\w+)}/g, function(m1, m2) {
			if (!m2)
				return "";
			return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
		});
	}
	//模板复制load()
	function load(){
	  $.ajax({
		url :'Request_Dispatch',
		type : 'get',
		data  :{   //向后台处理的servlet传送参数
			state:107,
			ActivityID:getQueryString("ActivityID"),
		},  
		cache : false,
		dataType : "json",
         success : function(dta) {
			dta = JSON.parse(dta);
			if (!dta || !dta.rows || dta.rows.length <= 0) {
				return alert(dta.rows);

			}
              document.getElementById("allcost").innerHTML=dta.allcost
			//获取模板上的HTML
			var html = $('script[type="text/template"]').html();
			//定义一个数组，用来接收格式化合的数据
			var arr = [];
			//`1对数据进行遍历

			$.each(dta.rows, function(i, o) {
				//这里取到o就是上面rows数组中的值, formatTemplate是最开始定义的方法.
				arr.push(formatTemplate(o, html));
			});
			//好了，最后把数组化成字符串，并添加到table中去。
			$('#tableData').html(arr.join(''));//整个数据模板刷新
                    //$('#tableData').appand(arr.join(''));开始写的代码是利用appand,只是在之前页面的数据板块添加，没有清除，并不是重新输出整个数据模板，所以模板样式不对 
走完这一步其实就完成了，不会吧，这么简单，不错，就是这么简单!! 不信就自己动手去试试!
		}
	});
	}

模板调用方法：

//页面开始时调用，从数据库加载模板内容，开始复制：

$(document).ready(function(){
     load();
 
 })

//在指定位置页面开始时调用：这种方法不采取load()封装

$("#datatable").click(function () {
$.ajax({
//如上代码内容
})
}

总之，如果使用触发方法调用如：onclick，则将ajaxf封装起来，通过id调用，直接运用第二种。

ajax获得用户从界面输入的值，作为参数传给后台的servlet（省略），servlet接受参数，进行数据库查询，返回json数据，（返回数据时，要注意json的数据格式，需要时，要进行转换），ajax接受数据，进行解析，然后进行模板填充。