JAVA WEB 中间件为SERVLET(九)

森林绿洲

已于 2023-02-08 10:17:53 修改

阅读量110

点赞数

文章标签： java 中间件开发语言

于 2023-02-08 08:55:56 首次发布

本文链接：https://blog.csdn.net/m0_70298159/article/details/128929107

版权

功能基本上已经实现了

主要代码：

shopp.js

function textjs() {
    if (!document.getElementsByClassName) {

        document.getElementsByClassName = function(cls) {
            var ret = [];
            var els = document.getElementsByTagName('*');
            for (var i = 0, len = els.length; i < len; i++) {
                if (els[i].className === cls ||
                    els[i].className.indexOf(cls + ' ') >= 0 ||
                    els[i].className.indexOf(' ' + cls + ' ') >= 0 ||
                    els[i].className.indexOf(' ' + cls) >= 0) {
                    ret.push(els[i]);
                }
            }
            return ret;
        }
    }

    var cartTable = document.getElementById('cartTable1');
    var tr = cartTable.children[1].rows;
    var checkInputs = document.getElementsByClassName('check');
    var checkAllInputs = document.getElementsByClassName('check-all');
    var selectedTotal = document.getElementById('selectedTotal');
    var priceTotal = document.getElementById('priceTotal');
    var selected = document.getElementById('selected');
    var foot = document.getElementById('foot');
    var selectedViewList = document.getElementById('selectedViewList');
    var deleteAll = document.getElementById('deleteAll');

    //小计
    function getSubTotal(tr) {
        var tds = tr.cells;
        var price = parseFloat(tds[2].innerHTML);
        var count = parseInt(tr.getElementsByTagName('input')[1].value);
        var SubTotal = parseFloat(price * count);
        tds[4].innerHTML = SubTotal.toFixed(2);
    }

    function getTotal() {
       // alert("111222")
        var seleted = 0;
        var price = 0;
        var HTMLstr = '';
        for (var i = 0, len = tr.length; i < len; i++) {
            if (tr[i].getElementsByTagName('input')[0].checked) {
                tr[i].className = 'on';
                seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
                price += parseFloat(tr[i].cells[4].innerHTML);
                HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>'
            } else {
                tr[i].className = '';
            }
        }
        selectedTotal.innerHTML = seleted;
        priceTotal.innerHTML = price.toFixed(2);
        selectedViewList.innerHTML = HTMLstr;

        if (selected == 0) {
            foot.className = 'foot';
        }
    }

    for (var i = 0, len = checkInputs.length; i < len; i++) {
        checkInputs[i].onclick = function() {
            if (this.className === 'check-all check') {
                for (var j = 0; j < checkInputs.length; j++) {
                    checkInputs[j].checked = this.checked;
                }
            }
            if (this.checked == false) {
                for (var k = 0; k < checkAllInputs.length; k++) {
                    checkAllInputs[k].checked = false;
                }
            }
            getTotal();
        }
    }

    selected.onclick = function() {
        if (foot.className == 'foot') {
            if (selected.innerHTML != 0) {
                foot.className = 'foot show';
            }
        } else {
            foot.className = 'foot';
        }
    }

    selectedViewList.onclick = function(e) {
        e = e || window.event;
        var el = e.srcElement;
        if (el.className == 'del') {
            var index = el.getAttribute('index');
            var input = tr[index].getElementsByTagName('input')[0];
            input.checked = false;
            input.onclick();
        }
    }

    for (var i = 0; i < tr.length; i++) {
        tr[i].onclick = function(e) {
            e = e || window.event;
            var el = e.srcElement;
            var cls = el.className;
            var input = this.getElementsByTagName('input')[1];
            var val = parseInt(input.value);
            var reduce = this.getElementsByTagName('span')[1];
            switch (cls) {
                case 'add':
                    input.value = val + 1;
                    reduce.innerHTML = '-';
                    getSubTotal(this);
                    break;
                case 'reduce':
                    if (val > 1) {
                        input.value = val - 1;
                    }
                    if (input.value <= 1) {
                        reduce.innerHTML = '';
                    }
                    getSubTotal(this);
                    break;
                case 'delete':
                    var conf = confirm('确定删除吗？');
                    if (conf) {
                        this.parentNode.removeChild(this);
                    }
                    break;
                default:
                    break;
            }
            getTotal();
        }
        tr[i].getElementsByTagName('input')[1].onkeyup = function() {
            var val = parseInt(this.value);
            var tr = this.parentNode.parentNode;
            var reduce = tr.getElementsByTagName('span')[1];
            if (isNaN(val) || val < 1) {
                val = 1;
            }
            this.value = val;
            if (val <= 1) {
                reduce.innerHTML = '';
            } else {
                reduce.innerHTML = '-';
            }
            getSubTotal(tr);
            getTotal();
        }
    }

    deleteAll.onclick = function() {
        if (selectedTotal.innerHTML != '0') {
            var conf = confirm('确定删除吗？');
            if (conf) {
                for (var i = 0; i < tr.length; i++) {
                    var input = tr[i].getElementsByTagName('input')[0];
                    if (input.checked) {
                        tr[i].parentNode.removeChild(tr[i]);
                        i--;
                    }
                }
            }
        }
        getTotal();
    }

    checkAllInputs[0].checked = true;
    checkAllInputs[0].onclick();
};
//1、页面加载完成后需要调用的方法
function test(){
    //使用AJAX调用后台的SERVLET

    let params="userid="+encodeURIComponent(userid);
    //提交数据
    var myrequest  = new XMLHttpRequest();
    myrequest.open("post","/untitled01_war_exploded/ShoppingServlet",true);
    myrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    myrequest.send(params);

    myrequest.onreadystatechange = function () {
        if(myrequest.readyState===4){
            val = JSON.parse(myrequest.responseText);
            //console.log(val);

        };
        var tableLine = document.getElementById("cartTable");
        //隐藏表格
        //tableLine.style.display="none"
        // console.log(tableLine.rows[0].cells[1])

        // //给src赋值
        // var srcd = simg[0].src = "/untitled01_war_exploded/images/1-1.jpg"
        var str = "";
        for(var i in val){
            //  let row =  tableLine.rows[0].cloneNode(true);//深度复制th对象
            //  //获取到img标签的src赋值
            //  var simg =  tableLine.rows[i].cells[1].getElementsByTagName("IMG")
            //  simg[0].src = val[i].shoppingUrl;
            //  //获取到span标签的value赋值
            //  var spand =  tableLine.rows[i].cells[1].getElementsByTagName("SPAN")
            //  spand[0].innerHTML = val[i].shoppingName;
            // // row.cells[1].innerHTML =val[i].shoppingName;
            //  row.cells[2].innerHTML =val[i].shoppingPrice;
            //  row.cells[3].innerHTML =val[i].shoppingsum;
            //  //计算商品小计
            //  const sum =parseInt(val[i].shoppingsum);
            //  const pri =parseFloat(val[i].shoppingPrice);
            //  row.cells[4].innerHTML =sum * pri;
            //  tableLine.appendChild(row);//在表格中添加复制的新行
            let item = val[i]
            let pric = parseFloat(item.shoppingPrice);
            let num = parseInt(item.shoppingsum);
            let countpri = pric * num;
            str += "<tr>"+
                "<td class='checkbox'>"+"<input class='check-one check' type='checkbox'/>"+"</td>"+
                "<td class='goods'>"+"<img src="+item.shoppingUrl+" />"+"<span>"+item.shoppingName+"</span>"+"</td>"+
                "<td class='price'>"+item.shoppingPrice +"</td>"+
                "<td class='count'>"+
                "<span class='reduce'>-</span>"+
                "<input class='count-input' readonly='readonly' type='text' value="+item.shoppingsum+" />"+
                "<span class='add'>+</span>"+
                "</td>"+
                "<td class='subtotal'>"+countpri+"</td>"+
                "<td class='operation'><span class='delete'>删除</span></td>"+
                "</tr>"
        }

        tableLine.innerHTML=str
        if(!str ==""){
            textjs()
        }

    }

}