在HTML/JavaScript的從一個按鈕點擊指定PHP函數

Question

我希望能夠通過點擊一個按鈕

現在我有這個片段的代碼來調用特定的PHP函數：

<table class='standardtable'> 
<tr> 
    <th>Event</th> 
    <th>Group</th> 
    <th>Course</th> 
    <th>Due Date</th> 
    <th>Due In/<span class='red'>Late By</span></th> 
</tr> 
<?php 
echo $html->tableCells($evalUpcoming); 
?> 
<?php if (empty($evalUpcoming)):?> 
<tr><td colspan="5" align="center"><b> No peer evaluations due at this time </b></td></tr> 
<?php endif; ?> 

我想讓它可以創建2個按鈕，正向和反向，然後單擊向前按鈕用evalUpcoming填充表格單元格，然後單擊反向填充表格單元格與evalRevUpcoming。

在此基礎上一篇：How to Call a PHP Function on the Click of a Button

這裏是我到目前爲止已經試過：

<table class='standardtable'> 
<tr> 
    <th>Event</th> 
    <th>Group</th> 
    <th>Course</th> 
    <th>Due Date</th> 
    <th>Due In/<span class='red'>Late By</span></th> 
    <input type="submit" class="button" name="forward" value="forward" /> 
    <input type="submit" class="button" name="reverse" value="reverse" /> 
</tr> 
<script> 

    $(document).ready(function(){ 
     $('.button').click(function(){ 
      var clickBtnValue = $(this).val(); 
      var ajaxurl = 'ajax.php', 
      data = {'action': clickBtnValue}; 
      $.post(ajaxurl, data, function (response) { 
       // Response div goes here. 
       alert("action performed successfully"); 
      }); 
     }); 

    }); 
</script> 
<?php 
if (isset($_POST['action'])) { 
    switch ($_POST['action']) { 
     case 'forward': 
      forward(); 
      break; 
     case 'reverse': 
      reverse(); 
      break; 
    } 
} 

function forward() { 
    echo $html->tableCells($evalUpcoming); 
    exit; 
} 

function reverse() { 
    echo $html->tableCells($evalRevupcoming); 
    exit; 
} 
?> 
<?php 
echo $html->tableCells($evalUpcoming); 
?> 
<?php if (empty($evalUpcoming)):?> 
<tr><td colspan="5" align="center"><b> No peer evaluations due at this time </b></td></tr> 
<?php endif; ?> 

但是，它似乎並沒有做任何事情，我也不讓關於正在成功執行的操作的警報。誰能告訴我我做錯了什麼？

此外，對於我打算這樣做的方式，這將導致表中的內容被立即更改嗎？我不太熟悉PHP和HTML，所以我不確定頁面如何改變，因爲新的PHP代碼被調用。

我想知道是否有一個更簡單的方法來做到這一點，我知道php代碼之前加載，但因爲它只是填充一個HTML表格不能這樣做在HTML中以某種方式嗎？

Answer 1

嘗試轉換您的按鈕點擊代碼如下，它可能會導致問題，因爲它在表內。

$(".standardtable tbody tr .button").on("click", function() { 
     var clickBtnValue = $(this).val(); 
     var ajaxurl = 'ajax.php', 
     data = {'action': clickBtnValue}; 
     $.post(ajaxurl, data, function (response) { 
      // Response div goes here. 
      alert("action performed successfully"); 
     }); 
}); 

Answer 2

首先使用e.preventDefault();防止形式的默認事件的發生，然後提交移動你的PHP另一個文件，最後阿賈克斯該文件

$(document).ready(function(){ 
     $('.button').click(function(e){ 
      e.preventDefault(); 
      var clickBtnValue = $(this).val(); 
      var ajaxurl = 'ajax.php', 
      data = {'action': clickBtnValue}; 
      $.post(ajaxurl, data, function (response) { 
       // Response div goes here. 
       alert("action performed successfully"); 
      },'html'); 
     }); 

    }); 

您ajax.php文件應該是這樣的：

<?php 
if (isset($_POST['action'])) { 
    switch ($_POST['action']) { 
     case 'forward': 
      forward(); 
      break; 
     case 'select': 
      reverse(); 
      break; 
    } 
} 

function forward() { 
    echo $html->tableCells($evalUpcoming); 
    exit; 
} 

function reverse() { 
    echo $html->tableCells($evalRevupcoming); 
    exit; 
} 
?>