Question

我有一个虚拟商店和一个购物篮。此外，我在每个页面都有一个信息说明，说明篮子中有多少产品和总和（我的篮子区域）。

问题是该篮子使用jQuery来更新和删除元素，但每个页面上的“我的篮子”区域在数据库中都有一个简单的查询，除了页面刷新外它不会更新。

是否有任何解决方案可以将篮子javascript逻辑与'我的购物篮区域'同步？

Answer 1

亚历克斯的答案虽然简短，但却恰到好处。

您可以使用XmlHttpRequest向服务器端页面发出GET请求，在该页面中返回表示您的购物篮产品的JSON字符串。然后，您可以使用JQuery在页面的DOM中创建此元素。

我认为JQuery本身有一些XmlHttpRequest的抽象。

Answer 2

我不知道你正在使用什么商店，但你必须要把它弄清楚。这是你要做的一个例子。

$('.addToCart').click(function(){
    //Whatever stuff
    $.get('updateCart.php?action=add&item=' + $(this).attr('id') + '&time=' new Date().getTime(), function(data)
    {
        alert(data); //the response
    }
});

Answer 3

是的，你可以让你的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回复购物篮处理程序来列出购物篮内容和其他元数据。

Answer 4

最佳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获取数据并输出（echo / print）篮子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..
}
?>

或类似的东西，我不知道你的篮子是什么样的。

再次，看这里http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Answer 5

您想使用XmlHttpRequest，也称为AJAX functions in jQuery。

只需将购物车的状态发回服务器（添加/更新/删除），然后在数据库中更新用户购物车。

这将使它们保持同步。

使用javascript / jQuery动态更改内容

5 个答案: