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

Question

我想在我的页面中显示由 PHP 函数生成的灯具，但仅当我按下“生成灯具”按钮时才显示。我知道应该使用 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);
    });
});