当按下HTML按钮时，如何显示从PHP函数返回的数据

Question

I want to display in my page the fixtures generated from the PHP function but only when I press the "Generate Fixtures" button. I know that AJAX should be used but I can't pass the data from the function to the div in my HTML page.

PHP code

 $teams = array("FC FCSB", "AFC Astra Giurgiu", "FC Dinamo 1948", "FC Viitorul 2009", "CSM Politehnica Iasi", "Universitatea Craiova", "FC Botosani", "CFR 1907 Cluj");
    $fixPair = new Fixture($teams);
    $schedule = $fixPair->getSchedule();
    $i = 1;
    foreach ($schedule as $rounds) {
        echo "<h5> Etapa " . $i . " </h5>";
        foreach ($rounds as $game) {
            echo "{$game[0]} vs {$game[1]}<br>";
        }
        echo "<br>";
        $i++;
    }
    echo "<hr>";

 $(document).ready(function(){ $('.button').click(function(){ var clickBtnValue = $(this).val(); var ajaxurl = 'ajax.php', data = {'action': clickBtnValue}; $.post(ajaxurl, data, function (response) { // Response div goes here. document.getElementById("demo").innerHTML = "Fixtures should be displayed here"; //alert("action performed successfully"); }); }); }); 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script> <input type="submit" class="button" name="insert" value="GENERATE FIXTURES" /> <div id="demo"></div> 

Answer 1

Update your event handler as:

$('.button').click(function(e){
    // Prevent form submit 
    e.preventDefault();

    var clickBtnValue = $(this).val();
    var ajaxurl = 'ajax.php',
    data =  {'action': clickBtnValue};
    $.post(ajaxurl, data, function (response) {
        // response variable stores all data received from ajax.php script

        // As you use jquery - you can select 
        // element by id with $("#id") selector
        $("#demo").html(response);
    });
});