无法使用 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;
}