javascript - Shoppingcart system from GET to AJAX post/get -

i made shopping cart website using php .get this:

every page starts with:

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

every product generated has following check when generated on website:

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>';     } 

what does: if product id $id in $_session['cart'] product have delete button onclick deletes product. when product not in session cart product have 'add' button adds product if click on it.

this works fine however, want change php getmethod ajax function because reloading of page seems bit amateurish.

so searched on google found when searching directly implementable ajax code magento or woocommerce. tried write own ajax function execute url haven't managed far. can give me direction on how this? not asking direct solution direction on way this.

should write ajax function add onclick on button every product function cart(id) { checks if id in php cart or should handle way different? still use php cart how made right or should change javascript array?

ps: i'm ok in php complete noob in javascript want learn of it.

edit: ok, first step solve using jquery.ajax(). use both jquery $.get() , $.post() method. know differences between them in php i'm not sure 1 use while using ajax.

you can use ajax said.based on code provided

        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>';     } 

then use jquery handle every click on anchor links having add-to-cart-btn class,get id , action want (if not in cart add else delete), , use ajax send them server.

$(".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 returned data php here                       //and on success toggle data action (because user may click button again...                        this_button.data('action', action == 'add' ? 'delete' : 'add');                      }             });           }); 

of course example basic.i have not tested should want.you should documentation ajax call can see options have,handle errors etc.