我有一个虚拟商店和一个购物篮。此外，我在每一页都有一个信息说明，说明一个购物篮中有多少产品和总金额（我的购物篮区域）。
问题是购物篮使用 jQuery 来更新和删除元素，但每个页面上的“我的购物篮”区域都在数据库中进行简单查询，并且除了页面刷新时它不会更新。
是否有任何解决方案可以将购物篮 JavaScript 逻辑与“我的购物篮区域”同步？
【问题讨论】：
标签： javascript jquery shopping-cart
alex 的回答简短但中肯。
您可以使用 XmlHttpRequest 向服务器端页面发出 GET 请求，在该页面中返回代表您的购物篮产品的 JSON 字符串。然后，您可以使用 JQuery 在页面的 DOM 中创建这些元素。
我认为 JQuery 本身对 XmlHttpRequest 有某种抽象。
【讨论】：
我不知道您使用的是哪家商店，但您基本上必须弄清楚。 下面是一个你会做什么的例子。
$('.addToCart').click(function(){
//Whatever stuff
$.get('updateCart.php?action=add&item=' + $(this).attr('id') + '&time=' new Date().getTime(), function(data)
{
alert(data); //the response
}
});
【讨论】：
是的，您可以让动态更新页面内购物篮的 JavaScript 代码也通过“ajax”向服务器发送更新事件。 jQuery 提供了a variety of useful ajax utilities 来进行这些更新。
我建议服务器拥有购物篮的“规范”版本，并且所有更新操作都会收到购物篮当前内容的副本，并使用它来调整页面上显示的内容。这是因为用户很混乱，你永远不知道他们什么时候会使用“在新标签/窗口中打开”。更新服务器是获取最新信息的机会。
例如，如果用户删除了一个项目，这个伪代码：
$.ajax({
url: "url_of_basket_handler",
data: {remove: productId},
success: updateBasketOnSuccess,
error: basketErrorHandler
});
...其中updateBasketOnSuccess 是一个函数，您的所有处理程序都使用该函数根据响应更新购物篮的显示内容：
function updateBasketOnSuccess(data) {
// Use the given data to update the display
}
...同样basketErrorHandler 处理告诉用户在 ajax 调用中出现错误：
function basketErrorHandler(jxhr, statusCode, err) {
// Tell the user something went wrong
}
我可能会让购物篮处理程序使用JSON 回复以列出购物篮内容和其他元数据。
【讨论】：
最佳 AJAX 参考：
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
var ajax_load = "<img src='img/load.gif' alt='loading...' />";
var loadUrl = "getbasket.php";
$("#mybasket").html(ajax_load).load(loadUrl, null);
然后 getbasket.php 只需要从 db 中获取数据并输出（回显/打印）例如篮子 html..
<?php
//Connect to mysql db and query
$dbvariables = mysql_fetch_array(...);
?>
My Basket
Items: <?php echo $dbvariables[item_count]; ?>
<?php
for($i=1;$i<=$dbvariables[item_count];$i++){
//Show items in basket..
}
?>
或者类似的东西，我不知道你的篮子是什么样子的。
再看这里@987654322@
【讨论】：
您想使用XmlHttpRequest，也称为AJAX functions in jQuery。
只需将您的购物车状态发布回服务器（在添加/更新/删除时），然后在数据库中更新用户的购物车。
这将使它们保持同步。
【讨论】：