ajax 拼接html问题

最新推荐文章于 2021-11-30 15:10:49 发布

安然无Yangon

最新推荐文章于 2021-11-30 15:10:49 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_36635434/article/details/86063251

js 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用AJAX进行动态页面拼接的具体实现方式，包括如何将数据动态插入到HTML页面中，以及在拼接过程中应用常用JS格式化函数的方法。通过具体示例，展示了如何处理数据并将其格式化为所需显示格式，如日期格式化和数值保留小数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发中遇到ajax 拼接前台页面，把数据动态拼接进去的问题

通常这样写

$.ajax({
    type:'post',
    url:'/buyer/h5/approve/ajaxPage',
    dataType:'json',
    data:{
        pageNum:page,
        pageSize:size,
        orderType:type
    },
    success:function (data) {
        //data是一个对象，里边有状态码，object数据
        var content=data.data;
        for(i in content){
            //同意链接
            var agreeUrl=base+"/h5Service/toApprovalDetailPage/"+content[i].id+"?from=approval_list";
            var refuseUrl=base+"/h5Service/toRefusePage/"+content[i].id+"?from=approval_list"
            var orderDetailUrl=base+"/usr/h5/order/myOrder/detail/"+content[i].id+"/"+content[i].type+"/"+h5Type;
            //商品集合
            var orderproduct=content[i].orderProductVoList;
            //订单总计
            var sum=content[i].amountExpress+content[i].amountAct
            //图片
            var imgs=''
            for(j in orderproduct){
                imgs+='<li><img src="'+imageNormalUrl(orderproduct[j].imgUrl)+'"/></li>'
            }
            //详情
            var detail=''
            for(s in orderproduct ){
                detail+='<div class="ol_main">'
                detail+='<div class="ol_main_left">'
                detail+='<img src="'+imageNormalUrl(orderproduct[s].imgUrl)+'" />'
                detail+=' </div>'
                detail+='<div class="ol_main_right">'
                detail+='<p class="olmr_p01">'
                detail+='<span>'+orderproduct[s].name+'</span>'
                detail+='<font>￥'+toDecimal2(orderproduct[s].initPrice)+'<br/><i>×'+orderproduct[s].prodCount+'</i></font>'
                detail+=' </p>'
                detail+='<p class="olmr_p02">'
                detail+='<span>规格：'+orderproduct[s].specification+'</span><br />'
                detail+='<span>货号：'+orderproduct[s].code+'</span><br />'
                detail+='<span>货期：'+orderproduct[s].stockPeriod+'</span>'
                detail+=' </p>'
                detail+=' </div>'
                detail+=' </div>'
            }
            result
                += ''
                +' <li onclick="toDetail(\''+orderDetailUrl+'\')">'
                +'    <div class="theme_box">'
                +'       <a href="#">订单号：'+content[i].saasOrdId+' &nbsp;&gt;</a>'
                +'       <img src="../../res/images/wx_icon.png" />'
                +'       <span>'+getStatus(content[i].currentStepId)+'</span>'
                +'    </div>'
                +'    <div class="ma_box">'
                +'       <p class="olmr_p02">'
                +'          <span>商家：'+content[i].sname+'</span><br />'
                +'          <span>采购者：'+content[i].bname+'</span><br />'
                +'          <span>经费卡号：'+content[i].accountNo+'</span><br />'
                +'          <span>下单日期：'+dataformat(content[i].createTime,"yyyy-MM-dd HH:mm:ss")+'</span>'
                +'       </p>'
                +'       <font class="Replay"><i>展开</i><b class="Replay_bg Replay_bg02"></b></font>'
                +'    </div>'
                +'    <div class="Replay_imgs">'
                +'       <ul>'
                +imgs
                +'       </ul>'
                +'    </div>'
                +detail

                +'    <div class="settlement_box">'
                +'       <i>'+toDecimal2(sum)+'</i>'
                +'       <font>订单总计：￥</font>'
                +'       <span>运费：￥'+toDecimal2(content[i].amountExpress)+'</span>'
                +'    </div>'
                +'    <div class="signIn">'
                +'       <a href="'+agreeUrl+'" class="signIn_btn02">同意</a>'
                +'       <a href="'+refuseUrl+'" class="signIn_btn01">拒绝</a>'
                +'    </div>'
                +' </li>';
        }
        $('.myAcceptance #testUl').append(result);
    }
});

附上几个常用的js 格式化函数

//保留两位小数
var toDecimal2 =function (x) {
    var f = parseFloat(x);
    if (isNaN(f)) {
        return false;
    }
    var f = Math.round(x*100)/100;
    var s = f.toString();
    var rs = s.indexOf('.');
    if (rs < 0) {
        rs = s.length;
        s += '.';
    }
    while (s.length <= rs + 2) {
        s += '0';
    }
    return s;
}
//日期格式化
var dataformat = function(time, format){
    var t = new Date(time);
    var tf = function(i){return (i < 10 ? '0' : '') + i};
    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
        switch(a){
            case 'yyyy':
                return tf(t.getFullYear());
                break;
            case 'MM':
                return tf(t.getMonth() + 1);
                break;
            case 'mm':
                return tf(t.getMinutes());
                break;
            case 'dd':
                return tf(t.getDate());
                break;
            case 'HH':
                return tf(t.getHours());
                break;
            case 'ss':
                return tf(t.getSeconds());
                break;
        }
    })
};

直接取值这样写： +' 商家：'+content[i].sname+' '

把值作为参数传入js函数中这样写： +' 运费：￥'+toDecimal2(content[i].amountExpress)+''

onclick事件这样写：+' <li onclick="toDetail(\''+orderDetailUrl+'\')">'

href 这样写： +' <a href="'+agreeUrl+'" class="signIn_btn02">同意</a>'