使用javascript/jQuery动态更改内容

Dynamically change content using javascript/jQuery

本文关键字：动态 javascript jQuery 使用      更新时间：2023-09-26

我有一个虚拟商店和一个购物篮。此外，我在每一页都有一个信息说明，说明一个篮子里有多少产品和总金额(我的篮子区域)。

问题是，篮子使用jQuery来更新和删除元素，但"我的篮子"区域在每个页面背后的数据库中有一个简单的查询，它不更新，除非在页面刷新。

是否有任何解决方案来同步篮子javascript逻辑与"我的篮子区域"?

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提供了各种有用的ajax实用程序来完成这类更新。

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

例如，如果用户删除一个项目，这个伪代码:

$.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中获取数据并输出(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/

您希望使用XmlHttpRequest，或者在jQuery中称为AJAX函数。

只需将您的购物车状态返回到服务器(添加/更新/删除)，然后在数据库中更新用户的购物车。

相关文章：