使用javascript/jQuery动态更改内容

问题描述：

我有一个虚拟商店和一个购物篮。此外，我在每一页都有关于篮子里有多少产品和总金额（我的篮子区域）的信息。使用javascript/jQuery动态更改内容

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

是否有任何解决方案来同步篮子的JavaScript逻辑与'我的篮子区'？

Ajax？ http://api.jquery.com/jQuery.ajax/ – 2011-04-07 07:57:16

答

亚历克斯的回答很简短，但恰到好处。

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

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

我更新了我的回答:) – alex 2011-04-07 08:13:13

答

你想使用XmlHttpRequest，否则被称为AJAX functions in jQuery。

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

这将使它们保持同步。

答

我不知道你正在使用什么商店，但你将不得不主要了解它。下面是你要做的一个例子。

$('.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.. 
} 
?>

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

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

使用javascript/jQuery动态更改内容

相关推荐