用执行的 PHP 替换 HTML 按钮

Question

这是我在这里的第一篇文章，所以提前感谢您的帮助。

我有一段 PHP 代码用于获取机场 METAR 并显示它。 'metar.php' 代码如下：

<?php

$location = "EGLL";

get_metar($location);

function get_metar($location) {
$fileName = "http://weather.noaa.gov/pub/data/observations/metar/stations/$location.TXT";
    $metar = '';
    $fileData = @file($fileName) or die('METAR not available');
    if ($fileData != false) {
            list($i, $date) = each($fileData); 

            $utc = strtotime(trim($date));
            $time = date("D, F jS Y g:i A",$utc);

            while (list($i, $line) = each($fileData)) {
                    $metar .= ' ' . trim($line);
                    }
            $metar = trim(str_replace('  ', ' ', $metar));
            }

    echo "<div style=\"color: white;\">METAR FOR $location (Issued: $time UTC):<br>$metar</div>";
    }
 ?>

目前，我的网站首页上有一些按钮在单击按钮时会重定向到 website.com/metar.php。代码如下：

 <li><button type="submit" style="height: 40px;" class="btn btn-primary" onclick="window.location.href = '/heathrow.php'"/>METAR At London Heathrow</button></li>

如果有人能告诉我如何更改此代码，以便在单击按钮时将按钮替换为 metar.php 的输出，而不是在按钮时重定向到 website.com/metar.php，我将不胜感激被点击。

我希望这是有道理的
再次非常感谢您！

Answer 1

这可以使用 AJAX 来完成。下面的代码展示了如何使用 jQuery 来完成。

<div id="dectinationDivId" style="color: white;"></div>

<button id="buttonId" style="height: 40px;" class="btn btn-primary">METAR At London Heathrow</button>

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#buttonId').click(function(){
        $.ajax({
            url: "/heathrow.php",
            success: function(data) {
                $('#dectinationDivId').html(data);
                $('#buttonId').hide();
            },
            error: function(jqXHR) {
                alert(jqXHR.responseText);
            }
        });
    });
</script>

---

对于多个按钮，有一种更好、更通用的方法，可以更轻松地维护代码（在本例中为添加和删除按钮）。

HTML/JS：

<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var metarButtons = $('.getMetarButtons');
        metarButtons.click(function(){
            var clickedButton = $(this);
            $.ajax({
                type: "POST",
                url: "/metarData.php",
                data: { location: clickedButton.attr('data-location') },
                dataType: 'html',
                success: function(data) {

                    $('#outputDiv').hide('slow', function() {
                        $(this).remove();
                    });

                    metarButtons.show('slow');

                    var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
                    outputElement.hide();
                    outputElement.insertAfter(clickedButton);

                    clickedButton.hide('slow', function() {
                        outputElement.show('slow');
                    });
                },
                error: function(jqXHR) {
                    alert(jqXHR.responseText);
                }
            });
        });
    });
</script>

<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "LLBG">METAR At Tel Aviv Ben Gurion</button>
<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "EGLL">METAR At London Heathrow</button>
<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "EGGW">METAR At London Luton</button>
<button style="height: 40px;" class="btn btn-primary getMetarButtons" data-location = "KJFK">METAR At New York John F. Kennedy</button>

PHP (metarData.php)：

<?php
    $location = $_POST["location"];

    get_metar($location);

    function get_metar($location) {
    $fileName = "http://weather.noaa.gov/pub/data/observations/metar/stations/$location.TXT";
        $metar = '';
        $fileData = @file($fileName) or die('METAR not available');
        if ($fileData != false) {
            list($i, $date) = each($fileData); 

                $utc = strtotime(trim($date));
                $time = date("D, F jS Y g:i A",$utc);

                while (list($i, $line) = each($fileData)) {
                    $metar .= ' ' . trim($line);
                }
            $metar = trim(str_replace('  ', ' ', $metar));
        }

        echo "METAR FOR $location (Issued: $time UTC):<br>$metar";
    }
?>