使用javascript/jQuery动态更改内容

我有一个虚拟商店和一个购物篮。此外，我在每一页都有一个关于篮子里有多少产品和总金额（我的篮子面积）的信息说明

问题是，basket使用jQuery更新和删除元素，但每个页面上的“我的basket”区域都位于数据库中一个简单查询的后面，并且除了在页面刷新时，它不会更新

是否有任何解决方案可以将basket javascript逻辑与您想要使用的“my basket area”（我的basket区域）同步？

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

这将使它们保持同步。

您要使用的，否则称为

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

---

这将使两者保持同步。

亚历克斯的回答很简短，但切中要害

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

---

我认为JQuery本身对XmlHttpRequest有某种抽象。

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
    }
});

---

我不知道你用的是哪家商店，但你得把它弄清楚。 这是一个你会做的例子

$('.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提供了执行这些更新的功能

我建议服务器使用篮子的“规范”版本，所有更新操作都会收到篮子当前内容的副本，并使用该副本调整页面上显示的内容。这是因为用户很混乱，你永远不知道他们什么时候会使用“在新选项卡/窗口中打开”。服务器更新是获取最新信息的机会

例如，如果用户删除了一个项目，则此伪代码：

$.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
}

---

我可能会使用篮子处理程序reply列出篮子内容和其他元数据。

是的，您可以让动态更新页面中篮子的JavaScript代码也通过“ajax”向服务器发送更新事件。jQuery提供了执行这些更新的功能

我建议服务器使用篮子的“规范”版本，所有更新操作都会收到篮子当前内容的副本，并使用该副本调整页面上显示的内容。这是因为用户很混乱，你永远不知道他们什么时候会使用“在新选项卡/窗口中打开”。服务器更新是获取最新信息的机会

例如，如果用户删除了一个项目，则此伪代码：

$.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
}

我可能会使用篮子处理程序回复来列出篮子内容和其他元数据。

最佳AJAX参考：

var ajax_load=”“；
var loadUrl=“getbasket.php”；
$（“#mybasket”）.html（ajax_load）.load（loadUrl，null）；

然后getbasket.php只需要从db中获取数据，并输出（echo/print）basket 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..
}
?>

我的篮子
项目：

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

同样，请看这里

最佳AJAX参考：

var ajax_load=”“；
var loadUrl=“getbasket.php”；
$（“#mybasket”）.html（ajax_load）.load（loadUrl，null）；

然后getbasket.php只需要从db中获取数据，并输出（echo/print）basket 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..
}
?>

我的篮子
项目：

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

再一次，看看这里

Ajax？AJAX