在按钮单击时将脚本结果打印到段落和控制台

Question

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

    <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);

    ?>

Answer 1

您可以使用click将PHP数组转换为Javascript对象文字。然后，您可以在<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> 侦听器中使用它。

{{1}}