将 HTML 按钮替换为已执行的 PHP - Replace HTML Button with Executed PHP

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

我有一段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，我将不胜感激。

我希望这是有道理
的，再次非常感谢你提前！

这可以使用 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";
    }
?>