資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用ajax透過POST方法將按鈕值傳送到PHP後端？
AJAX（非同步JavaScript和XML）透過允許伺服器通訊而無需頁面重新載入，從而使網頁更具響應性、互動性和動態性。JavaScript使用各種技術（包括XML、JSON和HTML）來發送和接收來自伺服器的資料。其中，JSON是最受歡迎的。
AJAX經常用於將資訊從網頁傳送到伺服器端指令碼，例如PHP指令碼。大多數現代網路瀏覽器都包含XMLHttpRequest物件，可用於此目的。可以使用XMLHttpRequest物件連線到給定的URL，向該URL傳送資料，然後等待來自伺服器的響應。我們也可以使用JQuery ajax包來簡化ajax請求。當按下按鈕時，JavaScript用於向伺服器上的PHP指令碼發出POST請求。按鈕的值作為資料在請求中傳送，PHP指令碼可以使用超級全域性變數$_POST來訪問它。然後，PHP指令碼可以處理資料，並透過更新網頁來響應JavaScript。
AJAX的主要目的是允許在網頁上動態更新內容，而無需完全重新整理頁面，這可以改善使用者體驗並提高網站的響應速度。
使用Ajax方法
將透過AJAX方法傳送到PHP後端的按鈕值，可以分為兩個步驟。
第一步，需要在JavaScript程式碼中設定按鈕點選事件的監聽。一旦點選事件觸發，就可以發出一個到PHP後端的AJAX請求。需要注意的是，需要將AJAX呼叫配置為使用POST方法，而不是預設的GET方法。
第二步，在AJAX請求中包含按鈕的值資料。可以透過訪問按鈕的value屬性獲取此資訊，然後將資料包含在AJAX呼叫的data引數中。
在發出AJAX呼叫後，需要配置PHP後端來接收來自AJAX呼叫的資料。可以透過訪問$_POST陣列來實現。按鈕的value屬性的名稱將作為陣列的鍵，按鈕的值將作為陣列的值。完成上述步驟後，按鈕值將透過POST方法，使用AJAX方法傳送到PHP後端。
您可以使用jQuery的ajax()方法提交包含按鈕值的POST請求，如下所示：
語法
// Button value let buttonValue = $("#myButtonId").val(); // or, let buttonValue = document.getElementById("#myButtonId").value; // Send the POST request $.ajax({ url: "php_file_name.php", type: "POST", data: { buttonValue: buttonValue }, success: function(response) { // Do something if ajax request is successful } });
示例
在下面的示例中，我們將按鈕值以及兩個欄位值（電子郵件和密碼）傳送到PHP後端伺服器。我們使用JQuery庫來發出ajax請求。首先，我們建立一個包含HTML和JavaScript程式碼的index.php檔案。JavaScript程式碼包含發出AJAX請求的程式碼。它傳送表單資料以及按鈕值。formSubmit.php是PHP的後端檔案，它接收AJAX POST資料。
index.php
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h3>Send button value to <i>PHP backend</i> via POST using <i>AJAX</i></h3>
<h4 id = "message" style = "color: #00ff00"></h4>
<div id = "myForm" onsubmit = "submitFunc()">
<div>
<label for = "email">Email</label>
<input type = "email" name = "email" id = "email">
<div>
<div>
<label for = "password">Password</label>
<input type = "password" name = "password" id = "password">
<div>
<button onclick = "submitFunc()" id = "submitButton" name = "myBtn" value = "XYZ">Submit</button>
</div>
<script>
var name = document.getElementById('name');
var pass = document.getElementById('password');
var message = document.getElementById('message');
var message = document.getElementById('myBtn');
function submitFunc() {
$.ajax({
type: "POST",
url: "formSubmit.php",
data: {email: email.value, password: pass.value, btn: btn.value},
success: function(result){
message.innerHTML = 'Email and Password send successfully!'
},
error: function (err) {
message.innerHTML = 'Email and Password send failed!'
}
});
}
</script>
</body>
</html>
formSubmit.php
<?php
if(isset($_POST)){
$email = $_POST["email"];
$password = $_POST["password"];
$btn = $_POST["btn"];
$result = "Email: $email, Password: $password, Button: $btn";
echo $result;
}
?>
這是將按鈕值傳送到PHP的完整演示。務必設定您的後端PHP檔案以接收和處理請求；否則，可能會出現也需要處理的錯誤。
3K+瀏覽量
