Retrieve Array of JSON Objects from Ajax to PHP

Create new php file named ajax.php as below:

<?php 
    $students = array(
        array(
            'id' => 'st01',
            'name' => 'name 1',
            'age' => 20
        ),
        array(
            'id' => 'st02',
            'name' => 'name 2',
            'age' => 21
        ),
        array(
            'id' => 'st03',
            'name' => 'name 3',
            'age' => 22
        )
    );
    header('Content-Type: application/json');
    echo json_encode($students);
?> 

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: 'GET',
                        url: 'ajax.php',
                        success: function(students) {
                            var result = '';
                            for(var i = 0; i < students.length; i++) {
                                result += '<br>id: ' + students[i].id;
                                result += '<br>name: ' + students[i].name;
                                result += '<br>age: ' + students[i].age;
                                result += '<br>----------------------';
                            }
                            $('#result').html(result);
                        }
                    });
                });

            });
        </script>
    </head>

    <body>

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

    </body>

</html>