AJAX request posted to same page does not populate $

I'm working on a file, form.php, which needs to handle user input using an AJAX request so the page doesn't reload. The user has 2 options - check or refresh data. Below is the code. The problem is, $_POST is not being populated. When the Network tab in Firefox dev tools is examined, it shows the requests are happening.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <form action="" method="post">
            <p>Select action for data -</p>
            <input type="radio" name="action" id="check" value="check">
            <label for="check">check</label>
            <br>
            <input type="radio" name="action" id="refresh" value="refresh">
            <label for="refresh">refresh</label>
            <br>
        </form>
        <script>
            $(document).ready(function() {
                $("input[type=radio][name='action']").change(function() {
                    var action = $("input[name='action']:checked").val();
                    executeAjax(action);
                });
            });

            function executeAjax(action) {
                return $.ajax({
                    method: "POST",
                    data: { action: action }
                })
                .done(function() {
                    console.log('success - '   action   ' is the action');
                })
                .fail(function(jqXHR, textStatus, errorThrown) {
                    console.log('ERROR');
                    console.log(jqXHR.status);
                    console.log(textStatus);
                    console.log(errorThrown);
                });
            }

        </script>
    </body>
</html>

<?php
echo '<hr>';
echo 'post - ' . json_encode($_POST) . '<br>';
$action = isset($_POST['action']) ? $_POST['action'] : 'no value';
echo $action;
// put logic here for what to do with with data based on value in $action'
?>

Request appears successful in Network tab:

Console shows success message from .done part of AJAX call:

So why doesn't $_POST contain they key 'action' with whichever value the user selected?

CodePudding user response：

In your code your are not using response of the ajax method.

           done(function(reposne) {
                console.log('success - '   action   ' is the action');
                console.log(response);
            })

Also you are using same form.php for ajax method. So your ajax response will print form html, And then your php $_POST related code.

Can you please put your php code at the top of the page, and put exit if form is posted. Otherwise print the form like

<?php
if(!empty($_POST)){
   // enter code here
   exit;
}
?>
<html> 
...
</html>