JS购物车(3)-Ajax发送POST请求提交订单

一、背景和需求

在购物车页面中，当用户点击“提交订单”按钮时
需要收集商品ID、商品数量等订单数据，并向后端发送POST请求

二、HTML代码

以SKU为单位的商品数据的层级结构如下：

 <div class="item" id="007">
    <div class="p-checkbox">
        <input type="checkbox" name="p-radio" ><label for></label>
    </div>

    <div class="p-goods">
        <div class="p-img"><img src="../images/goods-1.jpg"></div>
        <div class="p-name">iphone11</div><br>
        <div class="p-attr">黑色128G</div>
    </div>

    <div class="p-shop">Apple官方自营店</div>

    <div class="p-price">￥<span class="onlyPrice">5999</span></div>

    <div class="p-quantity">
       <input type="button" class="decrease" value="-">
       <input type="text" class="quantity" value="1"/>
       <input type="button" class="increase" value="+">
    </div>

    <div class="p-sum">￥<span class="onlySum">5999</span></div>

    <div class="p-action">
        <input type="button" class="deleteItem" value="删除"/>
    </div>
</div>

三、实现思路

1、将商品数据封装在JSON数组中

遍历商品列表，检查checkbox的checked属性是否为true
对于checked属性为true的商品
将其ID和数量放入一个JSON对象中
再利用push方法放入data数组
遍历完成后，通过stringify方法将data转化为字符串

2、通过Ajax发送POST请求

使用 jQuery 来封装POST请求
必要的内容包括：type、url、data、contentType以及请求成功or失败的回调函数

四、相关JS代码

//获取“提交订单”的按钮
var submit=document.getElementById("submit-order");

submit.onclick=function(){

    var data=[];
    var radios=document.getElementsByName('p-radio');
    var count=document.getElementsByClassName("quantity");
    var items=document.getElementsByClassName("item");

    for(var m=0;m<radios.length;m++)
    {
        if(radios[m].checked==true)
        {
         var item={};
         item.tradeid=items[m].getAttribute('id');
         item.amount=count[m].value;
         data.push(item);
        }
    }

    var result=JSON.stringify(data);

    $.ajax({
        type : "post",
        //后台请求地址
        url : '',

        data : result,
        //表明提交的是JSON类型的数据
        contentType: "application/json", 
        //异步请求
        async : false,

        success : function(){         },

        error :function(){   }

    });
}

完整的源代码请前往我的github仓库