购物车系统从 GET 到 AJAX post/get

Question

我使用 PHP 为网站制作了购物车。像这样获取：

每页开头为：

<?php session_start(); 
    require("dbconnect.php");
    if(!isset($_SESSION['cart'])) {
         $cart = array();
         $_SESSION['cart'] = $cart;
     }  
?>

每个生成的产品在网站上生成时都会进行以下检查：

if(!in_array($id, $_SESSION['cart'])) {
    echo '<a href="'.get_site_url(). '/sem?action=add&id=' .$id. '#wpc-products"><img width="20px" style="margin-left: 175px;  margin-top: -42px; float:left" src="http://bgc-testomgeving.nl/sem/wp-content/themes/sem/images/voeg-toe.png" alt="Voeg product toe"/></a>';
    }
else {
    echo '<a href="'.get_site_url(). '/sem?action=delete&id=' .$id. '#wpc-products"><img width="20px" style="margin-left: 175px; margin-top: -42px; float:left"  src="http://bgc-testomgeving.nl/sem/wp-content/themes/sem/images/verwijderen.png" alt="Verwijder product"/> </a>';
    }

它的作用：如果 ID 为 $id 的产品在 $_SESSION['cart'] 中，该产品将有一个删除按钮，单击该按钮可删除该产品。当产品不在会话购物车中时，产品将有一个 'add' 按钮，如果您单击它会添加产品。

这一切都很好，但是，我想将此 PHP GET 方法更改为 AJAX GET 函数，因为重新加载页面似乎有点业余。

所以我在 Google 上进行了搜索，但我在搜索此类内容时发现的所有内容都是可直接实现的 AJAX Magento 或 WooCommerce 代码。我尝试编写自己的 AJAX 函数来执行 URL 但到目前为止我还没有成功。有人可以指导我如何做到这一点吗？我不是在寻求直接的解决方案，而只是在寻求解决方法的指导。

我是否应该编写一个 AJAX 函数，我将其作为按钮上的 onclick 添加到每个产品，例如 function cart(id) { 以检查 id 是否在 PHP 中购物车还是我应该以不同的方式处理？我是否仍像现在那样使用 PHP 购物车，还是应该将其更改为 JavaScript 数组？

PS：我在 PHP 还行，但在 JavaScript 完全是菜鸟，但我真的很想学习一些。

编辑：好的，所以我解决这个问题的第一步是使用 jQuery.ajax()。但是我可以同时使用 jQuery $.get() 和 $.post() 方法。我在 PHP 中知道它们之间的区别，但我不确定在使用 AJAX 时使用哪个。

Answer 1

我认为您的代码可能看起来像这样..

写一个 PHP 页面，returns JSON 中的 $_SESSION 变量（javascript 对象表示法）。

示例URL：shopping_cart_items.php

<?php
session_start(); 
require("dbconnect.php");
echo json_encode($_SESSION);

然后用jQuery获取数据：

// Gets (JSON) a Javascript Object from  the server
jQuery.getJSON("shopping_cart_items.php",function(items_in_shopping_cart){
    // Loops through all the <a> elements with class shopping_cart_elements
    // (assuming your <a> elements have a distinctive attribute such as a class "shopping_cart_elements")
    jQuery("a.shopping_cart_elements").each(function(index,dom_object){
            // Gets the current <a> element id attribute
            current_dom_obj_id = jQuery(dom_object).attr('id');

            // Checks if current id belongs to the array current_dom_obj_id
            if(items_in_shopping_cart.indexOf(current_dom_obj_id) != -1)
                // Changes the 'href' attribute to'action=add'
                jQuery(dom_object).attr('href','/sem?action=add&id='+id+ '#wpc-products');
            else
                // Changes the 'href' attribute to'action=delete'
                jQuery(dom_object).attr('href','/sem?action=delete&id='+id+ '#wpc-products');

        });

});

Answer 2

您可以像 said.Based 一样在您提供的代码上使用 AJAX

        if(!in_array($id, $_SESSION['cart'])) {
    echo '<a class="add-to-cart-btn" data-id="'.$id.'" data-action="add"><img width="20px" style="margin-left: 175px;  margin-top: -42px; float:left" src="http://bgc-testomgeving.nl/sem/wp-content/themes/sem/images/voeg-toe.png" alt="Voeg product toe"/></a>';
    }
else {
    echo '<a class="add-to-cart-btn" data-id="'.$id.'" data-action="delete"><img width="20px" style="margin-left: 175px; margin-top: -42px; float:left"  src="http://bgc-testomgeving.nl/sem/wp-content/themes/sem/images/verwijderen.png" alt="Verwijder product"/> </a>';
    }

然后使用 jQuery 处理对具有 add-to-cart-btn class 的锚链接的每次点击，获取 id 和您想要的操作（如果它还没有在购物车中添加其他删除），并使用 AJAX 将它们发送到服务器。

$(".add-to-cart-btn").click(function(e) {
    e.preventDefault();
    var id=$(this).data('id');
    var action=$(this).data('action');
    var this_button=$(this);

$.ajax({
            url: "/sem?action="+action+"&id="+id,
                    type: "GET",
                    success: function (data)
                    {
                     //you can check your returned data from php here 
                     //and on success toggle data action (because user may click the button again...

                      this_button.data('action', action == 'add' ? 'delete' : 'add');

                    }
            });
          });

当然这个例子是真的 basic.I 还没有测试过但是像这样的东西应该做你 want.You 应该查找 ajax 调用的文档所以你可以看到所有您拥有的选项、处理错误等

购物车系统从 GET 到 AJAX post/get

Shoppingcart system from GET to AJAX post/get

javascript

php

ajax

get

cart