无法使用 AJAX 将我的 Javascript 变量传递给 PHP

Question

i've a problem with passing my Javascript variable to PHP using AJAX. My $remove can't echo out when clicking the button.

HTML Code:

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

JavaScript Code:

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 Code:

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

Answer 1

The purpose of Ajax is to make an HTTP request with JS and handle the response with JS .

You aren't doing anything to look at the data that is echoed.

 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>

If you want to navigate to a new page, then submit a <form> . Don't use Ajax.

Answer 2

Why not make a normal AJAX request with javascript instead and then you'd use the variable you are trying to pass as a query parameter instead. For example,

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"
    });
  })
})

Then your php code will look like this.

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