Pass Data from Ajax to PHP with POST Request

May 30, 2022May 30, 2022

Create new php file named ajax.php as below:

<?php 
    $id = $_POST['id'];
    $username = $_POST['username'];
    $price = $_POST['price'];
    echo 'id: '.$id;
    echo '<br>username: '.$username;
    echo '<br>price: '.$price; 
?>

Create new php file named index.php as below:

<html>

    <head>
        <title>nilpointer.net</title>
        <script src="js/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {

                $('#buttonDemo').click(function() {
                    $.ajax({
                        type: 'POST',
                        data: {
                            id: 123,
                            username: 'abc',
                            price: 4.5
                        },
                        url: 'ajax.php',
                        success: function(data) {
                            $('#result').html(data);
                        }
                    });
                });

            });
        </script>
    </head>

    <body>

        <input type="button" value="Demo Ajax" id="buttonDemo">
        <br>
        <span id="result"></span>

    </body>

</html>