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

一、背景和需求

在购物车页面中，当用户点击“提交订单”按钮时

需要收集商品ID、商品数量等订单数据，并向后端发送POST请求

二、HTML代码

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

iphone11

黑色128G

Apple官方自营店

￥ 5999

￥ 5999

三、实现思路

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.οnclick=function(){

var data=[];

var radios=document.getElementsByName('p-radio');

var count=document.getElementsByClassName("quantity");

var items=document.getElementsByClassName("item");

for(var m=0;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(){ }

});

}