使用javascript/jQuery動態更改內容

我有一個虛擬商店和一個購物籃。此外，我在每一頁都有關於籃子裏有多少產品和總金額（我的籃子區域）的信息。使用javascript/jQuery動態更改內容

問題是，籃子使用jQuery來更新和刪除元素，但每個頁面上的「我的籃子」區域在數據庫中有一個簡單的查詢，它不會更新，除非在頁面刷新時。

是否有任何解決方案來同步籃子的JavaScript邏輯與'我的籃子區'？

來源

2011-04-07 dana

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

亞歷克斯的回答很簡短，但恰到好處。

您可以使用XmlHttpRequest向服務器端頁面發出GET請求，在該頁面中返回代表籃子產品的JSON字符串。然後你可以使用JQuery在你的頁面的DOM中創建這些元素。

我認爲JQuery本身具有某種抽象的XmlHttpRequest。

來源

2011-04-07 08:00:39 Alessandro

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

你想使用XmlHttpRequest，否則被稱爲AJAX functions in jQuery。

只需將您的購物車狀態發回服務器（添加/更新/刪除），然後更新數據庫中用戶的購物車。

這將使它們保持同步。

來源

2011-04-07 07:52:08 alex

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

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

來源

2011-04-07 08:01:00

是的，你可以讓你的動態更新籃子頁內的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的籃子處理程序回覆來列出籃子內容和其他元數據。

來源

2011-04-07 08:01:11

最佳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/

來源

2011-04-07 08:01:40 Calum

使用javascript/jQuery動態更改內容

回答

相關問題