Добавить в корзину / Удалить из корзины без обновления страницы

Question

Я новичок в некоторых вещах, и мне нужна помощь по поводу страницы моего магазина.Для каждого элемента, который вы хотите добавить в корзину или удалить из корзины, страница обновляется, и это действительно раздражает, если вы хотите купить несколько элементов.Я прочитал, что могу использовать AJAX, я прочитал много методов, и у меня ничего не получалось.Что мне нужно сделать, чтобы это работало?Вот мои добавления / удаления:

<form action="" method="post">
    <input type="hidden" name="item_id" value="{sid}">
    <input type="hidden" name="parent" value="{parent_category}">
    <input type="submit" name="atc" value="Añadir" class="sub-link">
</form> 

<form action="" method="post">
    <input type="hidden" name="item_id" value="{cid}">
    <input type="hidden" name="parent" value="{parent_category}">
    <input type="submit" name="rfc" value="Remover" class="sub-link">
</form>

И эта функция обрабатывает отправку:

function add_to_cart() {
    global $db, $db_data, $db_acc, $login;

    if (!empty($_POST['atc']) || !empty($_POST['rfc']) 
        && isset($_GET['page']) && isset($_GET['data']) 
        && $_GET['page'] == "store_shop") {

        $data = $_GET['data'];
        $pos  = strpos($data, "-");
        if ($pos == TRUE) {

            $ndt = explode("-", $data);
            $d1  = clean($ndt[0]);
            $d2  = clean($ndt[1]);

            if ($d1 == FALSE) {
                $d1 = 0;
            }
        } else {
            $d1 = 0;
            $d2 = 0;
        }

        $sqli = $db->query("SELECT id, rname, char_db FROM $db_data.realms WHERE id='$d1'");
        $numi = $db->num($sqli);
        $geti = $db->get($sqli);
        $cdb  = $geti['char_db'];

        $sqla = $db->query("SELECT id, username FROM $db_acc.account WHERE username='$login'");
        $geta = $db->get($sqla);
        $acid = $geta['id'];

        if ($numi == 1) {
            $sqlc = $db->query("SELECT guid, account, name FROM $cdb.characters WHERE account='$acid' AND guid='$d2'");
            $numc = $db->num($sqlc);
            $getc = $db->get($sqlc);

            if ($numc == 1) {
                $item   = clean($_POST['item_id']);
                $parent = clean($_POST['parent']);

                if (!empty($_POST['atc'])) {
                    $sqll = $db->query("INSERT INTO $db_data.cart (`realm`, `account`, `character`, `item`, `parent`) VALUES ('$d1', '$acid', '$d2', '$item', '$parent')");
                } else if (!empty($_POST['rfc'])) {
                    $sqll = $db->query("DELETE FROM $db_data.cart WHERE id='$item'");
                }
                header("Location: ?page=store_shop&data={$data}");
            } else {
                header("Location: ?page=store_shop&data={$data}");
            }
        } else {
            header("Location: ?page=store_shop&data={$data}");
        }
    }
}

Редактировать: я думаю, что мне не хватает некоторых деталей: После нажатия «Добавить» («Añadir» на испанском) o «удалить» («Remover» на испанском), страница перезагрузится, и товар будет добавлен в корзину.Когда я пробую решения, которые я прочитал в stackoverflow или на другом веб-сайте, большинство из них не работает для моего магазина, и единственное, что я могу получить, - это предотвратить перезагрузку страницы, но корзина не обновляется.Может мне стоит использовать iframe в div корзины?Я все еще читаю о ajax, но не могу получить его самостоятельно.

Answer 1

Попробуйте это

Удалите кнопку отправки и вызовите функцию Добавить в корзину и тоже самое для Удалить из корзины, используя onclick = "addtocart ()" в теге привязки

function addtocart(){ get 'sid' and 'parent' value from anchor tag using jquery<br> $.ajax({<br> type: 'POST',<br> url: '/cart/add.php',<br> data:{ 'sid':sid, 'parent':parent }<br> success : function(data) { alert('success'); } }); }

Answer 2

Это форма, которая обычно вызывает загрузку страницы, если только действие onsubmit по умолчанию не переопределено, а функция переопределения не вызывает stopPropagation для объекта события.AJAX требует JS, в котором создается объект XMLHttpRequest (или ActiveX для IE) и по умолчанию связывается с сервером без обновления (хотя это может быть сделано программно).Тогда ваш сервер может вернуть JSON, например, или какой-нибудь индикатор того, был ли вызов успешным и ошибочным, и клиентская сторона может обработать его соответствующим образом