将脚本结果打印到段落和控制台上的按钮单击 - Print script results to paragraph and console on button click

Print script results to paragraph and console on button click

我希望这个按钮有一个函数，将从php文件的结果打印到它下面的一个段落，并到控制台。我在php没有经验，有人可以请指导我什么样的功能，我需要这样做，我分配onclick="或一些东西的按钮..?谢谢你的帮助

    <button>Print to console</button>
    <h2>Printed results</h2>
    <p></p>
   <?php
    $data = array(
    'Lorem lorem ipsum'=>array(
            0=>array(
                'first_time' => '09:00',
                'second_time' => '10:20',
                'step_1' => 'lorem',
                'step_2' => 'lorem ipsum',
                'step_3' => 'lorem lorem',
            ),
            1=>array(
                'first_time' => '09:00',
                'second_time' => '10:20',
                'step_1' => 'lorem',
                'step_2' => 'lorem ipsum',
                'step_3' => 'lorem lorem',
            ),
        ),
    'Lorem ipsum dolor'=>array(
            0=>array(
                'first_time' => '09:00',
                'second_time' => '10:20',
                'step_1' => 'lorem',
                'step_2' => 'lorem ipsum',
                'step_3' => 'lorem lorem',
            ),
            1=>array(
                'first_time' => '09:00',
                'second_time' => '10:20',
                'step_1' => 'lorem',
                'step_2' => 'lorem ipsum',
                'step_3' => 'lorem lorem',
            ),
        ),
    'Lorem lorem lorem'=>array(
            0=>array(
                'first_time' => '09:00',
                'second_time' => '10:20',
                'step_1' => 'lorem',
                'step_2' => 'lorem ipsum',
                'step_3' => 'lorem lorem',
            ),
            1=>array(
                'first_time' => '09:00',
                'second_time' => '10:20',
                'step_1' => 'lorem',
                'step_2' => 'lorem ipsum',
                'step_3' => 'lorem lorem',
            ),
        )
    );              
    echo json_encode($data);
    ?>

您可以使用json_encode()将PHP数组转换为Javascript对象文字。然后您可以在click侦听器中使用它。

<button id="but">Print to console</button>
<h2>Printed results</h2>
<p id="print"></p>
<?php
$data = array(
'Lorem lorem ipsum'=>array(
        0=>array(
            'first_time' => '09:00',
            'second_time' => '10:20',
            'step_1' => 'lorem',
            'step_2' => 'lorem ipsum',
            'step_3' => 'lorem lorem',
        ),
        1=>array(
            'first_time' => '09:00',
            'second_time' => '10:20',
            'step_1' => 'lorem',
            'step_2' => 'lorem ipsum',
            'step_3' => 'lorem lorem',
        ),
    ),
'Lorem ipsum dolor'=>array(
        0=>array(
            'first_time' => '09:00',
            'second_time' => '10:20',
            'step_1' => 'lorem',
            'step_2' => 'lorem ipsum',
            'step_3' => 'lorem lorem',
        ),
        1=>array(
            'first_time' => '09:00',
            'second_time' => '10:20',
            'step_1' => 'lorem',
            'step_2' => 'lorem ipsum',
            'step_3' => 'lorem lorem',
        ),
    ),
'Lorem lorem lorem'=>array(
        0=>array(
            'first_time' => '09:00',
            'second_time' => '10:20',
            'step_1' => 'lorem',
            'step_2' => 'lorem ipsum',
            'step_3' => 'lorem lorem',
        ),
        1=>array(
            'first_time' => '09:00',
            'second_time' => '10:20',
            'step_1' => 'lorem',
            'step_2' => 'lorem ipsum',
            'step_3' => 'lorem lorem',
        ),
    )
);              
?>
<script>
var data = <?php echo json_encode($data); ?>;
document.getElementById('but').addEventListener('click', function() {
    var html = '';
    for (var key in data) {
        html += '<h1>' + key + '</h1>';
        data[key].forEach(function(item) {
            html += '<p>first time: ' + item.first_time + '</p>';
            html += '<p>second time: ' + item.second_time + '</p>';
            html += '<p>step 1: ' + item.step_1 + '</p>';
            html += '<p>step 2: ' + item.step_2 + '</p>';
            html += '<p>step 3: ' + item.step_3 + '</p>';
        });
    }
    document.getElementById('print').innerHTML = html;
});
</script>