ajax购物车_制作一个简单的AJAX购物车

最新推荐文章于 2021-08-06 17:53:05 发布

cunchi8090

最新推荐文章于 2021-08-06 17:53:05 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： java js php javascript ajax ViewUI

原文链接：https://www.experts-exchange.com/articles/3255/Making-a-simple-AJAX-shopping-cart.html

本教程展示了如何使用AJAX技术和WhizBase创建一个简单的购物车系统。通过会话管理存储和AJAX进行通信，避免了传统Cookie的使用。文章详细介绍了产品页面、添加和移除商品以及显示购物车的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax购物车

Making a simple AJAX shopping cart

制作一个简单的AJAX购物车

Couple years ago I made my first shopping cart, I used iframe and JavaScript, it was very good at that time, there were no sessions or AJAX, I used cookies on clients machine.

几年前，我做了我的第一个购物车，我使用了iframe和JavaScript，当时那很好，没有会话或AJAX，我在客户端计算机上使用了cookie。

Today we have more advanced technology, faster, better and more fancy, we can make shopping carts on any site with no need to talk with cookies, let sessions do the storing and AJAX make the communication.

今天，我们拥有更先进的技术，更快，更好，更花哨，我们可以在任何站点上制作购物车而无需与Cookie对话，让会话进行存储，而AJAX可以进行通信。

In this tutorial I will show you how to make a Session/AJAX based shopping cart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.whizbase.com/eng/?p=8

在本教程中，我将向您展示如何使用WhizBase来制作基于Session / AJAX的购物车，如果您想了解有关WhizBase的更多信息，请阅读我以前的文章，网址为http://www.whizbase.com/cn g /？p = 8

The products page

产品页面

Every shopping site have a product page, and that page is where everything starts when you make a shopping. To add products to the shopping cart we need products, every product need an Unique ID. On this page we will also show the cart, we make sure when the visitor comes for the first time it will be empty. Every visit will be a unique shopping and that means a unique session. Sessions are temporary data files created on the server having some data about or from the visitor coming on the site. Every visitor have its own unique session. WhizBase manages sessions automatically, so you just work with session variables as you work with any other, no need to work with session files on the server.

每个购物站点都有一个产品页面，购物时一切都是从该页面开始的。要将产品添加到购物车中，我们需要产品，每个产品都需要一个唯一ID。在此页面上，我们还将显示购物车，我们确保访客第一次来时将是空的。每次访问都将是一次独特的购物，这意味着一次独特的会话。会话是在服务器上创建的临时数据文件，其中包含有关访问者或来自站点的访问者的一些数据。每个访客都有自己独特的会话。 WhizBase自动管理会话，因此您可以像处理任何其他变量一样使用会话变量，而无需使用服务器上的会话文件。

In this file which I will name as «default.wbsp» I will turn sessions to «True» because they are «False» by default. I will also need the AJAX script, the products listings and the shopping cart div.

在此文件中，我将其命名为“ default.wbsp”，因为默认情况下会话为“ False”，因此我会将会话设置为“ True”。我还将需要AJAX脚本，产品清单和购物车div。

Look at the code comments for more details:

查看代码注释以获取更多详细信息：

[FormFields]
WB_UseSessions=T 
#* I am setting WB_UseSessions to True so I can use sessions with WhizBase *#
<!--WB_BeginTemplate-->
#* I am checking if product1,product2 and product3 variables are not set and set a value of zero, that is how I know if the user is comming for the first time or not.*#
$wbif["$wbgets[product1]"=""|$wbsets[product1|0|f]|]$wbif["$wbgets[product2]"=""|$wbsets[product2|0|f]|]$wbif["$wbgets[product3]"=""|$wbsets[product3|0|f]|]
#* I am using $wbgets[varname] to get a session variable, and $wbsets[varname€|value] to set a session variable *#
<html>
<head>
<script type="text/javascript">
#* I am making a showCart JavaScript/AJAx function, it creates an AJAX object and calls «showCart.wbsp» file to show the current status of the cart, the retrieved data is putted by innerHTML into «cartview» div *#
function showCart()
{
  if (window.XMLHttpRequest)
    {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("cartview").innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("GET","showCart.wbsp?rand="+Math.floor(Math.random()*99999999999),true);
  xmlhttp.send();
}

#* addCart function in JavaScript will pass an ID and send it to addCart.wbsp which adds a new product in the cart. On responce we will refresh the cart view by calling showCart function*#

function addCart(id)
{
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        showCart();
      }
    }
  xmlhttp.open("GET","addCart.wbsp?id="+id+"&rand="+Math.floor(Math.random()*99999999999),true);
  xmlhttp.send();
}

#* remove function in JavaScript will pass an ID and send it to removeCart.wbsp which removes one product passed from the cart. On responce we will refresh the cart view by calling showCart function  *#

function remove(id)
{
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        showCart();
      }
    }
  xmlhttp.open("GET","removeCart.wbsp?id="+id+"&rand="+Math.floor(Math.random()*99999999999),true);
  xmlhttp.send();
}
</script>
</head>
<body onload="showCart();"> 
#* OnLoad we will refresh the cart by showCart() function, this will update the cart div every time we refresh the page *#
#* We list the products and every product have its own ID *#
<a href="javascript:void(0);" onclick="addCart(1);">Product 1</a><br />
<a href="javascript:void(0);" onclick="addCart(2);">Product 2</a><br />
<a href="javascript:void(0);" onclick="addCart(3);">Product 3</a><br /><br /><br />
<b>Cart content</b><br />
#* cartview is a div for holding cart data.*#
<div id="cartview">Cart is empty!</div>
</body>
</html>

Save this code as default.wbsp.

将此代码另存为default.wbsp。

Adding products in the cart

在购物车中添加产品

When we make shopping online, sometimes we want to buy more than one instance from a product, for example I want two T-Shirts. As a user I do not want to see a list in my cart like this: T-shirt,T-shirt,Shoes,chocolate. This will confuse me, so I am adding a counter for every product, so it will be 2x T-shirt, 1x Shoes, 1x chocolate. Keep that in mind. In the next file I am working on I will add data to the session. I will receve data by AJAX calls so I do not need any interface. I will need to check which product I will add and that is made by the sent ID.

当我们进行在线购物时，有时我们想从一种产品中购买多个实例，例如，我想要两个T恤。作为用户，我不想在我的购物车中看到这样的列表：T恤，T恤，鞋子，choc 油酸的。这会让我感到困惑，所以我要为每种产品添加一个计数器，因此它将是2x T恤，1x鞋子，1x巧克力。记在脑子里。在下一个文件中，我将数据添加到会话中。我将通过AJAX调用接收数据，因此不需要任何接口。我将需要检查要添加的产品以及由发送的ID制成的产品。

If an ID is sent I am adding one instance more, so if I have 4 items from product1 it will become 5 items.

如果发送了ID，则我要再添加一个实例，因此，如果我有1个产品中的4件商品，它将变成5件商品。

See the comments in the code for more details:

有关更多详细信息，请参见代码中的注释：

[FormFields]
WB_UseSessions=T
#* I am turning the sessions to True *#
<!--WB_BeginTemplate-->
$wbif["$wbv[id]"="1"|$WBSETS[product1|$WBCalc[$WBGETS[product1]+1]|f]|]
$wbif["$wbv[id]"="2"|$WBSETS[product2|$WBCalc[$WBGETS[product2]+1]|f]|]
$wbif["$wbv[id]"="3"|$WBSETS[product3|$WBCalc[$WBGETS[product3]+1]|f]|]
#* I have three cases in my example so I am hard-coding them. I check the ID variable sent by GET or POST by $WBV, if it is equal an ID I have I will set a value of the variable+1 using $WBCalc, $WBSets and $WBGets, if not do nothing *#

In more complex examples you can use loops and not hard-coding the code, this is only for tutorial purposes.

在更复杂的示例中，您可以使用循环而不是对代码进行硬编码，这仅用于教程目的。

Save this code as addCart.wbsp.

将此代码另存为addCart.wbsp。

Removing products from the cart

从购物车中取出产品

If I want to remove an item from the cart I want to remove one instance only not all the items. So as like adding here I am removing.

如果我想从购物车中删除一件物品，我只想删除一个实例，而不是所有物品。就像在这里添加一样，我正在删除。

[FormFields]
WB_UseSessions=T
#* I am turning the sessions to True *#
<!--WB_BeginTemplate-->
$wbif["$wbv[id]"="1"|$WBSETS[product1|$WBCalc[$WBGETS[product1]-1]|f]|]
$wbif["$wbv[id]"="2"|$WBSETS[product2|$WBCalc[$WBGETS[product2]-1]|f]|]
$wbif["$wbv[id]"="3"|$WBSETS[product3|$WBCalc[$WBGETS[product3]-1]|f]|]
#* Removing is the same code as adding but the only different we will remove an item not adding it. *#

Save this code as removeCart.wbsp.

将此代码另存为removeCart.wbsp。

Show me my Cart

给我看我的购物车

Finally we will make the showCart.wbsp file, it will just contain some HTML and WhizBase code for showing the cart content.

最后，我们将制作showCart.wbsp文件，它将仅包含一些用于显示购物车内容HTML和WhizBase代码。

[FormFields]
WB_UseSessions=T
#* I am turning the sessions to True *#
<!--WB_BeginTemplate-->
There is:
<br />$wbgets[product1] X Product1 $wbif[$wbgets[product1]>0|(<a href="javascript:void(0);" onclick="remove(1);">remove</a>)|] #* we show the session variable containning number of items of the products and only if there is items then show the remove link also *#
<br />$wbgets[product2] X Product2 $wbif[$wbgets[product2]>0|(<a href="javascript:void(0);" onclick="remove(2);">remove</a>)|]
<br />$wbgets[product3] X Product3 $wbif[$wbgets[product3]>0|(<a href="javascript:void(0);" onclick="remove(3);">remove</a>)|]<br />

Save this code as showCart.wbsp.

将此代码另存为showCart.wbsp。

What's next

下一步是什么

This is a very simple tutorial to show you how you can make a shopping cart using AJAX/WhizBase technologies. If you want more complex shopping carts you need to use loops and databases which can be also done with WhizBase and AJAX, if you are not familiar with WhizBase please read my previous articles.

这是一个非常简单的教程，向您展示如何使用AJAX / WhizBase技术制作购物车。如果您想要更复杂的购物车，则需要使用循环和数据库，这也可以通过WhizBase和AJAX完成，如果您不熟悉WhizBase，请阅读我以前的文章。

For more information email me at: NurAzije [at] Gmail [dot] com Or visit the WhizBase official site at www.whizbase.com

有关更多信息，请给我发送电子邮件：NurAzije [在] Gmail [点] com或访问WhizBase官方网站，网址为www.whizbase.com。

NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.

NurAzije是一名PHP和WhizBase程序员，在撰写本文时，他正在与WhizBase合作进行多个项目。