购物车所用知识总结

function shopping_cart(){
var xhr = new XMLHttpRequest();//创建对象
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//状态判断
var str = xhr.responseText;//后台传值接收
chuliData(str);
}
}
xhr.open('post','../php/viewcart_php.php');//发送请求，post方式以及路径
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(null);//传值，为空
}

//字符串转二维数组
/*
功能：将字符串转成二维数组
参数1：字符串
参数2：二维数组分隔符
参数3：一维数组分隔符
返回：二维数组
*/
function strToArr(str,fg1,fg2){
    var temp = str.split(fg1),
        arr = [];
    for(var i = 0;i < temp.length;i++){
        arr[i] = temp[i].split(fg2);
    }
        return arr;
}

<!-- 引入外部html文件-->
<div id="page1"></div> 
<script>
$("#page1").load("general.html"); 
</script>

//jQuery页面加载完成
$(document).ready(function(){
chushihua();
});

/************通过json传值，将购物车数据库数据得到****************/
function chushihua(){
    $.ajax({
        url:"php/viewcart_php.php",//路径
        data:{"type":"viewcart"},//传输数据
        type:"post",//传值方式
        dataType:"json",//数据类型
        success:function(data){//返回数据
            if(data == null){
                location.href="login.html";
            }else{
                main_page_js(data);
            }
        }
    });
}

/****************** json显示数据到页面，简单字符串拼接实现表格的显示*******************************/
function main_page_js(data){
    var tr = `
        <tr>
            <td>水果名称</td>
            <td>水果价格</td>
            <td>购买数量</td>
        </tr>
            `;
    var tabDam = $("table");
    var trStr = "";
    for(var key in data){//循环行，获得关联数组的键
        trStr += "<tr>";
        for(var k in data[key]){//循环列
            trStr += "<td>"+data[key][k]+"</td>";//+ 对字符串进行拼接
        }
        trStr +="<td><button name = '"+key+"' onClick = 'add_two(this)'>增加</button></td><td><button name = '"+key+"' onClick = 'del(this)'>删除</button></td>";
        trStr += "</tr>";
        
    }
    trStr +="<td><button onClick = 'sub()'>提交订单</button></td>";
    tabDam.html(tr+trStr);//json对页面进行赋值
}

//prompt()//弹窗，输入值,实现购买多个的功能