Jquery遍历数组(包括获取后端数据后的操作)和遍历标签(class名)

版权声明:仅仅菜鸟,愿帮到工作中预bug困惑的您 https://blog.csdn.net/weixin_41716259/article/details/82378118

//遍历数组(获取后端数据如何遍历操作)

var status  = 1;   //自定义状态

$('.tables-detail').html("");     //调用ajax之前如果不同数据要显示在同一个地方,最好清空内容

    $.ajax({
        type:"GET/POST",
        async:true,           
        url:接口地址, 
        data : {" 与后端接受参数一致":前端所传参数},
        success:function(data){          //获取后端数据
            console.log(data.pageInfos );     //判断后端数据是否返回成功
              if(data.pageInfos == null || data.pageInfos.length == 0){     //如果后端返回数据为空
                    var $tableDetail = $('.tables-detail');
                    var $imgs = $("<img class='orderimgs' src='/image/competUnits/wdd.png'>");
                    $tableDetail.append($imgs);
                }else{                                  //返回数据则进行相应的操作
                   if(status == 1){
                        waitfunhtml(data.pageInfos);       //函数调用
                    if(status== 2){
                        waitgoodshtml(data.pageInfos);      //函数调用
                    };
                }  
        },
        error:function(data){         //表示后端数据传输失败
//            console.log('获取推送信息产生异常:'+JSON.stringify(data));
            alert("数据获取失败");
        }
    });

//后端数据显示格式

[
    pageInfos:{   
                        "orderStatus": "1",         //状态
                         "name": "骨骼",            //商品名称    
                         "id": "1",    
               }
];

//函数封装.................................................

function waitfunhtml(waitdata){       //waitdata传参,该参数即为后端数据
    var $tablesDetail = $('.tables-detail');
    $tablesDetail.html("");       //清空数据
    var $tablewait = $('<table class="tablewait" >');

    var $tbodywait = $('<tbody></tbody>');
    $.each(waitdata,function(i,e){           //遍历后端数据渲染至dom元素
        var $trwait = $('<tr>');
        var $tdwait =
            '<td dataname='+ e.id  +'>' + e.name +'</td>' +
            '<td >' +
            '<a class="lookmodel" data-refuseid='+ e.id  +' data-refusesta='+ e.orderStatus +' href="javascript:void(0);">已拒订单                   </a>' +
            '</td>';
        $trwait.append($tdwait);
        $tbodywait.append($trwait);
    });
    $tablewait.append($tbodywait);
    $tablesDetail.append($tablewait);
}

//遍历标签(class名)

var  $sonCheckBox = $('.son_check');    //获取每一个class名

function totalMoney() {
    var total_money = 0;
    var total_count = 0;
    var calBtn = $('.calBtn a');
    $sonCheckBox.each(function () {         //遍历每个class名
        if ($(this).is(':checked')) {
            var goods = parseInt($(this).parents('.order_lists').find('.sum_price').html().substring(1));
            var num =  parseInt($(this).parents('.order_lists').find('.sum').val());
            total_money += goods;
            total_count += num;
        }
    });
    $('.total_text').html('¥'+total_money);
    $('.piece_num').html(total_count);
    // console.log(total_money,total_count);
}

猜你喜欢

转载自blog.csdn.net/weixin_41716259/article/details/82378118