js轻松拼接html字符串

来源：互联网发布：linux c 获取ntp时间编辑：程序博客网时间：2024/05/17 07:37

在js中拼接html字符串，是一件很痛苦的事情。这里介绍一下，如何使用jsTemplate轻松拼接html字符串。

一、确定想要拼接的页面：

1、想要在页面上点击“优惠劵”按钮时，弹出该页面，该页面的数据是在点击“优惠劵”按钮时，使用ajax动态从后台获取，拼接该页面。

2、点击页面中“优惠劵30”字样时，触发click事件，关闭该页面，设置订单使用了30元优惠劵。

效果如下：

2、对应的html文件代码如下：

<div class="coupons_relative">                        <div class="coupons_absolute">                            <div class="xq_title">                                <div class="coupons_close"></div>                                优惠券信息</div>                            <div class="title">可直接点击选择使用优惠券</div>                            <ul>                                <li><a>优惠券￥30</a></li>                                <li><a>优惠券￥40</a></li>                                <li><a>优惠券￥50</a></li>                            </ul>                            <div class="clear"></div>                                                        <div class="qurey_btn">关 闭</div>                        </div>                    </div>

二、在js中拼接该html字符串

1、在jsp引入如下js

<script src="${ctx }/js/jsTemplate/template-simple.js" type="text/javascript" language="javascript"></script>

该js文件下载地址：http://download.csdn.net/detail/u012171005/8037795

2、在jsp定义好模板文件

<!-- 优惠劵弹出层模板 --><script id="couponsTemplate" type="text/html">                <div class="coupons_absolute">                    <div class="xq_title"><div class="coupons_close" onclick="couponsClose();"></div>优惠信息</div>                        <div class="title">可直接点击选择使用优惠券</div>                    <ul>{{if validCouponsNum!=null&&validCouponsNum>'0'}}{{each viennaMemberCouponsList as viennaMemberCoupons viennaMemberCouponsIndex}}{{if viennaMemberCoupons.couponsType=='1'}}<li style="float:left;"><a href="javascript:void(0);" perValue="{{viennaMemberCoupons.couponsCode}}" perMoney="{{viennaMemberCoupons.couponsFee}}" onclick="useShowedCoupons(this,'{{viennaMemberCoupons.couponsCode}}','{{viennaMemberCoupons.couponsType}}')">优惠劵￥{{viennaMemberCoupons.couponsFee}}元</a></li>{{/if}}{{/each}}{{else}}<span class="orange_txt">没有可用的优惠劵</span>{{/if}}                    </ul>                    <div class="clear"></div>                    <div class="clear"></div>                    <div class="qurey_btn" onclick="couponsConfirm();">关 闭</div>                </div></script>

3、下面就可以在js中使用jstemplate进行拼接了，即点击“优惠劵”按钮时，执行下面方法。

$.getJSON(url, {"hotelNo": $("#hotelNo").val(),"roomTypeNo":$("#roomTypeNo").val(),"startTime":$("#viennaOrder_checkInTime").attr("value"),"endTime":$("#viennaOrder_checkOutTime").attr("value"),"roomNum":$("#viennaOrder_roomNum").attr("value")}, function(vinnaRoomPrice) {//隐藏遮罩层shadeDiv.hide();        //拼接优惠促销按钮层//type:1，积分换房订单，0，普通订单if(type!=1){//加载优惠劵、团购劵、现金劵层var couponsTemplateHtml = template.render('couponsTemplate', vinnaRoomPrice);$("#couponsWindowDiv").html(couponsTemplateHtml);});

说明：VinnaRoomPrice是调用ajax后，后台返回的json格式的对象

VinnaRoomPrice实体对象定义如下：

package com.founder.vienna.common.common.entity;import java.math.BigDecimal;import java.util.List;import com.founder.vienna.common.common.entity.pms.OfflineCoupon;import com.founder.vienna.common.common.entity.ws.BaseResult;/** * 订单、房价对象 * @author chenzhenyu * */public class VinnaRoomPrice {/** * 选定房型选定期间的标准价格 */private List<OrderRoomPrice> roomPriceList;/**     * 总房费金额     */    private BigDecimal totalMoney;    /**     * 优惠金额     */    private BigDecimal feeMoney;    /**     * 应付金额     */    private BigDecimal payMoney;        /** * 首夜房价 */private Double firstDayPrice;/** * 首页房价（取门市价） */private Double firstDayRackPrice;/**     * 优惠金额(仅用来页面显示)     */    private BigDecimal displayFeeMoney;    /**     * 应付金额(仅用来页面显示)     */    private BigDecimal displayPayMoney;            /**     * 间夜数     */    private Integer roomDayNum;        /**     * 是否有促销活动     */    private String isHavePromotion;//0表示有，1表示无        /**     * 会员类型     */    private String memberType;        /**     * 存放校验返回结果     */    private BaseResult result;        /**     * 线下优惠劵对象     */    private OfflineCoupon offlineCoupon;            /** * 选定房型的优惠促销信息 */private List<ViennaPMPromotion> viennaPMPromotionList;/** * 登陆会员的优惠券信息 */private List<ViennaMemberCoupons> viennaMemberCouponsList;/** * 登录会员的团购券列表 */private List<ViennaMbGroupBuy> viennaMbGroupBuyList;/** * 可用的优惠劵数量 */private Integer validCouponsNum;/** * 可用的现金劵数量 */private Integer validCashNum;/** * 可用的团购劵数量 */private Integer validGroupBuyNum;            public List<ViennaMemberCoupons> getViennaMemberCouponsList() {return viennaMemberCouponsList;}public void setViennaMemberCouponsList(List<ViennaMemberCoupons> viennaMemberCouponsList) {this.viennaMemberCouponsList = viennaMemberCouponsList;}public List<ViennaMbGroupBuy> getViennaMbGroupBuyList() {return viennaMbGroupBuyList;}public void setViennaMbGroupBuyList(List<ViennaMbGroupBuy> viennaMbGroupBuyList) {this.viennaMbGroupBuyList = viennaMbGroupBuyList;}public Integer getValidCouponsNum() {return validCouponsNum;}public void setValidCouponsNum(Integer validCouponsNum) {this.validCouponsNum = validCouponsNum;}public Integer getValidCashNum() {return validCashNum;}public void setValidCashNum(Integer validCashNum) {this.validCashNum = validCashNum;}public Integer getValidGroupBuyNum() {return validGroupBuyNum;}public void setValidGroupBuyNum(Integer validGroupBuyNum) {this.validGroupBuyNum = validGroupBuyNum;}public List<ViennaPMPromotion> getViennaPMPromotionList() {return viennaPMPromotionList;}public void setViennaPMPromotionList(List<ViennaPMPromotion> viennaPMPromotionList) {this.viennaPMPromotionList = viennaPMPromotionList;}public Double getFirstDayRackPrice() {return firstDayRackPrice;}public void setFirstDayRackPrice(Double firstDayRackPrice) {this.firstDayRackPrice = firstDayRackPrice;}public OfflineCoupon getOfflineCoupon() {return offlineCoupon;}public void setOfflineCoupon(OfflineCoupon offlineCoupon) {this.offlineCoupon = offlineCoupon;}public BaseResult getResult() {return result;}public void setResult(BaseResult result) {this.result = result;}public List<OrderRoomPrice> getRoomPriceList() {return roomPriceList;}public void setRoomPriceList(List<OrderRoomPrice> roomPriceList) {this.roomPriceList = roomPriceList;}public String getMemberType() {return memberType;}public void setMemberType(String memberType) {this.memberType = memberType;}public String getIsHavePromotion() {return isHavePromotion;}public void setIsHavePromotion(String isHavePromotion) {this.isHavePromotion = isHavePromotion;}public Integer getRoomDayNum() {return roomDayNum;}public void setRoomDayNum(Integer roomDayNum) {this.roomDayNum = roomDayNum;}public BigDecimal getTotalMoney() {return totalMoney;}public void setTotalMoney(BigDecimal totalMoney) {this.totalMoney = totalMoney;}public BigDecimal getFeeMoney() {return feeMoney;}public void setFeeMoney(BigDecimal feeMoney) {this.feeMoney = feeMoney;}public BigDecimal getPayMoney() {return payMoney;}public void setPayMoney(BigDecimal payMoney) {this.payMoney = payMoney;}public Double getFirstDayPrice() {return firstDayPrice;}public void setFirstDayPrice(Double firstDayPrice) {this.firstDayPrice = firstDayPrice;}public BigDecimal getDisplayFeeMoney() {return displayFeeMoney;}public void setDisplayFeeMoney(BigDecimal displayFeeMoney) {this.displayFeeMoney = displayFeeMoney;}public BigDecimal getDisplayPayMoney() {return displayPayMoney;}public void setDisplayPayMoney(BigDecimal displayPayMoney) {this.displayPayMoney = displayPayMoney;}            }

0 0