如何使用 AJAX 和 PHP 將多個表單欄位提交到資料庫？

用於將多個表單輸入欄位提交到資料庫的AJAX 和PHP

在此場景中，您有一個包含多個輸入欄位的PHP 產生的表單，您想要使用AJAX 將所有資料提交到資料庫。

你怎麼能開始吧？

利用 JSON（JavaScript 物件表示法）對表單資料進行編碼並將其傳送至伺服器。 JSON 是一種結構化且人類可讀的格式，可以在客戶端和伺服器之間交換資料。

JavaScript 中的 AJAX 函數範例：

function MyFunction() {
  // Gather the data from the form
  const data = {};
  data.num_to_enter = $('#num_to_enter').val();

  for (let i = 1; i <= data.num_to_enter; i++) {
    data['fname[' + i + ']'] = $('#fname[i]').val();
    data['lname[' + i + ']'] = $('#lname[i]').val();
    data['email[' + i + ']'] = $('#email[i]').val();
  }

  // Set up the AJAX request
  $.ajax({
    url: 'process.php',
    type: 'POST',
    data: JSON.stringify(data),
    dataType: 'json',
    success: function(data) {
      // Handle the success response
      console.log(data.success); // Should be "yes" if successful
    },
    error: function() {
      // Handle the error response
      alert('There was an error submitting the data.');
    }
  });

  return false;
}

PHP腳本範例(process.php):

<?php
// Decode the JSON data sent from the client
$data = json_decode(file_get_contents('php://input'), true);

// Process the data and update the database (not shown here)

// Set up the success response
$response = ['success' => 'yes'];

// Encode the JSON response
echo json_encode($response);
?>

關鍵注意事項：

• 在HTML 和AJAX 函數中使用動態欄位名稱來處理多個表單欄位。
• 使用 JSON.stringify() 將資料轉換為 JSON，然後透過AJAX。
• 在客戶端和伺服器端適當處理成功和錯誤回應。

以上是如何使用 AJAX 和 PHP 將多個表單欄位提交到資料庫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！