HTML 버튼을 실행 된 PHP로 바꿉니다

Question

이것은 내 첫 번째 게시물이므로 도움을 미리 감사드립니다.

공항 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로 리디렉션 내 웹 사이트의 주요 뉴스에 버튼이 있습니다 : 다음과 같이 코드 'metar.php이'입니다. 사람이 어떻게 버튼을 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> 

나는 그것을 감사하겠습니다이로 리디렉션하는 것보다 오히려 클릭하면 다음과 같이 코드는 버튼을 클릭하면 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"; 
    } 
?>