當按下HTML按鈕時，如何顯示從PHP函數返回的數據

Question

我想在我的頁面中顯示從PHP函數生成的固定裝置，但是僅當我按下“ Generate Fixtures”按鈕時才顯示。 我知道應該使用AJAX，但是我無法將數據從函數傳遞到HTML頁面中的div。

PHP代碼

 $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

將事件處理程序更新為：

$('.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);
    });
});