从GET到AJAX的Shoppingcart系统发布/获取

时间:2016-07-11 11:04:42

标签: javascript php ajax get cart

我使用PHP为网站制作了购物车.GET像这样:

每个页面都以:

开头
<?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的产品位于$_SESSION['cart'],则产品将有一个删除按钮,该按钮会删除产品。当产品不在会话购物车中时,产品将会添加&#39;按钮,如果单击它,则会添加产品。

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

所以我在谷歌搜索但是我在搜索这样的东西时发现的只是可以直接实现的Magento或WooCommerce的AJAX代码。我试着编写自己的AJAX函数来执行URL,但到目前为止我还没有管理过。有人可以给我一个如何做到这一点的方向吗?我不是要求直接的解决方案,而是要求以何种方式执行此操作。

我是否应该编写一个AJAX函数,我将其添加为每个产品的按钮,如function cart(id) {那样检查id是否在PHP购物车中,或者我应该以不同的方式处理这个问题?我仍然使用PHP Cart,就像我现在做的那样,还是应该将其更改为JavaScript数组?

PS:我在PHP中表现不错,但在JavaScript中却是一个完整的菜鸟,但我真的想学习一些。

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

2 个答案:

答案 0 :(得分:1)

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

  • 编写一个PHP页面,以JSON(javascript对象表示法)返回$_SESSION变量。

示例网址: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');

        });

});

答案 1 :(得分:1)

你可以像你说的那样使用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类的锚链接的每次点击,获取你想要的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');

                    }
            });
          });

当然这个例子非常基本。我没有测试过,但是这样的事情应该做你想要的。你应该查看ajax调用的文档,这样你就可以看到你拥有的所有选项,处理错误等。