無法使用 AJAX 將我的 Javascript 變量傳遞給 PHP

Question

我在使用 AJAX 將我的 Javascript 變量傳遞給 PHP 時遇到問題。單擊按鈕時，我的$remove無法回顯。

HTML 代碼：

<p><button class="btn-remove">Remove</button></p>

JavaScript 代碼：

const removeBtn = document.querySelectorAll('.btn-remove');

removeBtn.forEach((item) => {
    item.addEventListener('click', function() {
    const toBeRemovedName = item.parentNode.parentNode.children[0].innerHTML;

    $.ajax({
        url: "./shopping_cart.php",
        method: "POST",
        data: {toBeRemovedName: toBeRemovedName},
    });
    })
})

PHP 代碼：

if(isset($_POST['toBeRemovedName'])) {
    $remove = $_POST['toBeRemovedName'];
    echo $remove;
}

Answer 1

Ajax 的作用是用 JS 發起 HTTP 請求，用 JS處理響應。

您沒有做任何事情來查看回顯的數據。

 jQuery.ajax({ url: "https://cors-anywhere.herokuapp.com/https://postman-echo.com/post", method: "post", data: { example: 12345 } }).then(response => console.log(response));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果您想導航到新頁面，請提交<form> 。 不要使用 Ajax。

Answer 2

為什么不使用 javascript 發出正常的 AJAX 請求，然后使用您嘗試傳遞的變量作為查詢參數。 例如，

const removeBtn = document.querySelectorAll('.btn-remove');

removeBtn.forEach((item) => {
    item.addEventListener('click', function() {
    const toBeRemovedName = item.parentNode.parentNode.children[0].innerHTML;

    $.ajax({
        url: "./shopping_cart.php?toBeRemovedName=" + toBeRemovedName,
        method: "GET"
    });
  })
})

那么您的 php 代碼將如下所示。

if(isset($_GET['toBeRemovedName'])) {
    $remove = $_GET['toBeRemovedName'];
    echo $remove;
}