如何更新塊元素的樣式並將參數傳遞給PHP函數

我確定我已經完成了複雜的事情，但我試圖用引用的HTML完成2件事情。當用戶選擇一個選項時，如果它滿足條件，我想將leader表的顯示樣式從隱藏切換到可見（我已經成功完成了下面的JS）如何更新塊元素的樣式並將參數傳遞給PHP函數

我也想傳遞選擇的選項作爲PHP函數的參數，該函數將設置我可以使用的$ _SESSION變量。

從我的理解，我將不得不使用AJAX請求傳遞值的PHP腳本，但我不完全瞭解AJAX POST與GET。

HTML

<select id="rate_type" name="rate_type"> 
<option value="">Select One</option> 
<option value="1">Non-Supervisors</option> 
<option value="2">Supervisors</option> 
<option value="3">Manager</option> 
<option value="4">Director</option> 
<option value="5">Sales</option> 
<option value="6">Executive</option> 
</select>

<script> 
window.onload = function() { 
     var eSelect = document.getElementById('rate_type'); 
     var leaderTable = document.getElementById('leadership'); 

     eSelect.onchange = function() { 
      if((eSelect.selectedIndex == 2) || (eSelect.selectedIndex == 3) || (eSelect.selectedIndex == 4) || (eSelect.selectedIndex == 5) || (eSelect.selectedIndex == 6)){ 

       leaderTable.style.display= 'block'; 


       } else { 

       leaderTable.style.display = 'none'; 

      } 

     } 
    } 

</script>

來源

2013-02-12 Requin Creative

你試過使用jQuery嗎？ – user20232359723568423357842364 2013-02-12 18:15:26

ajax請求與普通的HTTP請求沒有區別。 GET指定URL中的參數，最適合在內容框架中獲取動態內容，不應將其用於其他目的。 POST更安全，並且可以發送更多數據。您仍然需要進行服務器端驗證，如果您是AJAX新手，請使用jQuery – runspired 2013-02-12 18:17:31

下面的代碼將從谷歌添加jquery src，並在更改時向服務器發出ajax請求。有關更多信息，請參見jQuery POST。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
     $('#rate_type').change(function() { 
      if(($(this).val() == 2) || ($(this).val() == 3) || ($(this).val() == 4) || ($(this).val() == 5) || ($(this).val() == 6)){ 
       $('#leadership').show(); 
      } else { 
       $('#leadership').hide(); 
      } 

      // this is the shorthand post 
      $.post(
       // the url 
       '<?php echo $_SERVER['PHP_SELF'] ?>', 
       // the request parameters to send 
       { 
        rate_type: $('#rate_type').val(), 
        some_other_var: 'junk' 
       }, 
       function(data) { 
        // do something here 
        console.log(data); 
      }); 
     }); 
     // fire the change event on load if needed 
     $('#rate_type').change(); 
}); 
</script>

來源

2013-02-12 18:25:08 user20232359723568423357842364

我可以使用您發佈的代碼實現它。如果可能的話，如果用戶在選擇#rate_type時想要選擇另一個，並且出現錯誤，那麼我需要採取哪些額外的步驟來更新頁面上的數據。我將速率類型存儲在會話變量中，以便我可以將它作爲php函數的參數傳遞，以便從SQL數據庫中提取結果。 JQuery/Ajax可以在每次調用函數的時候拉動數據，甚至在這個時候甚至不需要使用PHP。非常感謝。 – 2013-02-13 02:04:47

首先，幾乎沒有人再寫道：「原始」 JS。使用一個讓生活更輕鬆的JS庫。我推薦jQuery。它會花你幾分鐘的時間來理解它，但它可以在1 line中實現AJAX。

關於AJAX POST和GET的區別，對你來說沒有關係。你可以做任何一個。在您的PHP腳本中使用$_REQUEST[..]查找參數，您將覆蓋這兩種情況。

末，這裏有一些想法：

如果您需要立即傳達價值的服務器，你將不得不使用AJAX
如果你不介意的話，當你溝通刷新頁面值給服務器，你可以跳過AJAX，並通過改變JS中的window.location並在URL中包含參數來完成。 AJAX使用簡單，避免刷新，因此更好..
如果您不需要立即將值傳遞給服務器，您可以將它作爲cookie（使用document.cookie）保存在JS中，它會用用戶提出的下一個請求到達服務器。然後只需使用PHP尋找它$_COOKIE[..]

來源

2013-02-12 18:23:31 talkol

如何更新塊元素的樣式並將參數傳遞給PHP函數

回答

相關問題