如何使用 AJAX 和 PHP 將多個表單輸入儲存到資料庫？

使用AJAX 和PHP 將多個表單輸入儲存到資料庫

AJAX（非同步JavaScript 和XML）允許在一個網頁瀏覽器和一個伺服器，無需刷新頁面。在這種情況下，它可用於使用 PHP 將表單輸入傳輸到資料庫。

實作

HTML 表單

產生具有多個輸入欄位的表單，確保它們的名稱對應於您想要要的PHP $_POST 變數

Ajax函數

製作以下 JavaScript 函數來處理表單提交：

function saveData() {
  // Collect all input values
  var inputs = $("input[type=text]");
  var data = {};
  $.each(inputs, function() {
    data[$(this).attr("name")] = $(this).val();
  });

  // Convert data to JSON
  var jsonData = JSON.stringify(data);

  // Send data to PHP file via AJAX
  $.ajax({
    url: "save.php",
    type: "POST",
    data: { data: jsonData },
    dataType: "json",
    success: function(response) {
      if (response.success) {
        alert("Data saved successfully.");
      } else {
        alert("Error saving data.");
      }
    }
  });
}

PHP 腳本

save.php中，解碼JSON數據並執行數據庫操作：

<?php
// Decode JSON data
$data = json_decode($_POST['data']);

// Connect to database and execute query
// ...

// Prepare response
$response = array();
if ($result) {
  $response['success'] = true;
} else {
  $response['success'] = false;
}

// Encode response as JSON and echo
echo json_encode($response);

附加說明

• 序列化表單資料：您可以使用表單來取代手動收集輸入值。 Serialize() 建立形式的字串表示形式data.
• 自訂輸入名稱： 提供的範例假定連續的數字輸入名稱。如果您有自訂輸入名稱，請相應地修改 JavaScript 程式碼。
• JSON 解析：如果您是 JSON 新手，請參閱 MDN 等資源以取得有關在 JavaScript 中解析 JSON 的指南。

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