最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

js购物车实现思路及代码(个人感觉不错)_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 21:17:39
文档

js购物车实现思路及代码(个人感觉不错)_javascript技巧

js购物车实现思路及代码(个人感觉不错)_javascript技巧: 代码如下: pageEncoding=utf-8%> String path = request.getContextPath(); String basePath = request.getScheme() + :// + request.getServerName() + : + request.getServerPort() + pa
推荐度:
导读js购物车实现思路及代码(个人感觉不错)_javascript技巧: 代码如下: pageEncoding=utf-8%> String path = request.getContextPath(); String basePath = request.getScheme() + :// + request.getServerName() + : + request.getServerPort() + pa
 代码如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>






购物车


$(function() {
//点击加号购物车数量增加1
$(".add").live("click",function(){
var isAdd = true;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var totalprice = parseFloat($("#totalprice").text());
var price = parseFloat($(this).closest("ul").find("#price").text());
if (!isNaN(num)) {
num++;
if (num > 99) {
num = 99;
isAdd = false;
}
if(isAdd) {
totalprice = totalprice + price;
}
}
var total = num * price;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
if(data.success==true){
$("#totalprice").text(totalprice);
}
});
});
//点击加号购物车数量减少1
$(".delete").live("click",function(){
var isReduce = true;
var num = parseInt($(this).closest("li").find("#num").text());
var productId = $(this).closest("li").find("#productId").val();
var totalprice = parseFloat($("#totalprice").text());
var price = parseFloat($(this).closest("ul").find("#price").text());
if (!isNaN(num)) {
num--;
if (num < 1) {
num = 1;
isReduce = false;
}
if(isReduce){
totalprice = totalprice - price;
}
}
var total = num * price;
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){
if(data.success==true){
$("#totalprice").text(totalprice);
}
});
});
$("#cha").live("click",function() {
var productId = $(this).closest("ul").find("#productId").val();
$.post("<%=basePath%>deleteFromShopCart.action","productId="+productId,function(data){
if(data.success==true){
getShopCartInfo();
}
});
});
function getShopCartInfo(){
$.ajax({
type : "POST",
url : "<%=basePath%>findShopCart.action",
success : function(data) {
var row = "";
var list = data.list;
$("#main_t_l").empty();
var total = 0;
if(list!=null&&list.length!=0){
for(var i=0;itotal = total + list[i].price * list[i].num;
row = ""+
"
  • "+list[i].productname+"
  • "+
    "
  • "+list[i].price+"¥
  • "+
    "
  • "+
    ""+
    ""+
    ""+
    ""+
    "
  • "+
    "
  • "+list[i].totalprice+"¥
  • "+
    "
  • "+
    "image/cha.png\" style=\"width: 25px;height: 25px\" id=\"cha\">"+
    "
  • "+
    ""+
    "
    ";
    $(row).appendTo($("#main_t_l"));
    $("#totalprice").find("span").text(total);
    }
    }else {
    $("#main_t_l").append("
  • 您的购物车为空,快去购物吧!
  • ");
    $("#totalprice").find("span").text(0);
    }
    }
    });
    }
    //提交订单
    $("#ji").click(function(){
    var name = $("#name").val();
    var tele = $("#tele").val();
    var address = $("#address").val();
    var totalprice = $("#totalprice").find("span").text();
    if(totalprice == 0){
    alert("购物车为空,不能提交订单!");
    return;
    }
    if(name==""){
    alert("姓名不能为空!");
    return;
    }
    if(tele==""){
    alert("电话不能为空!");
    return;
    }
    if(address==""){
    alert("地址不能为空!");
    return;
    }
    $("#ji").attr("disabled","disabled");
    $("#ji").css("background","#808080");
    document.getElementById("bgDiv").style.visibility = "visibility";
    document.getElementById("myspin").style.visibility = "visibility";
    $.post("<%=basePath%>addShopCart.action","name="+name+"&telephone="+tele+"&address="+address,function(data){
    if(data.success == true) {
    getShopCartInfo();
    alert("提交成功");
    }else {
    alert("提交失败,请重新提交!");
    $("#ji").addClass("ji");
    $("#ji").attr("disabled","");
    }
    });
    });
    window.onload = getShopCartInfo();
    window.onload = function() {
    document.getElementById("bgDiv").style.visibility = "hidden";
    document.getElementById("myspin").style.visibility = "hidden";
    };
    });
    //验证联系方式
    function validTeleNum() {
    var tel = /(^[0-9]{3,4}[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
    if (document.getElementById("tele").value != '') {
    if (!tel.test(document.getElementById("tele").value)) {
    alert("联系电话格式不正确,请重新输入!");
    document.getElementById("tele").value = "";
    }
    }
    }













  • 单品

  • 价格

  • 数量

  • 合计

  • 删除


























  • 姓名:
    联系方式:
    地址:


    总计






    >







    文档

    js购物车实现思路及代码(个人感觉不错)_javascript技巧

    js购物车实现思路及代码(个人感觉不错)_javascript技巧: 代码如下: pageEncoding=utf-8%> String path = request.getContextPath(); String basePath = request.getScheme() + :// + request.getServerName() + : + request.getServerPort() + pa
    推荐度:
    标签: 购物车 实现 代码
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top