收集表單數據以提交Ajax

Question

我有一個數據庫，其中有50多個項目需要檢查和編輯。 我有一個網頁，該網頁使用php從數據庫中提取數據並將其顯示為webform中的值。 然后，根據用戶想要執行的操作，頁面底部有一系列的提交按鈕。 每個按鈕都使用onclick方法來調用javascript函數。

在需要進行某些更改的情況下，用戶將直接在Web表單中進行編輯。 例如，在文本區域中，文本區域的值將顯示數據庫項的當前內容。 然后，用戶可以編輯內容。 單擊“保存更改”按鈕將調用ajax函數，以使用POST請求將數據發送回服務器。

我所遇到的問題（可能對那些知道如何做的人來說很簡單）是如何從下面的變量“ FormData”（大概是一個數組）中收集來自不同表單組件的所有更新數據以發送到服務器。 有沒有一種方法可以一次完成所有操作，還是我必須逐步檢查每個表單元素並將它們逐個添加到數組中？ “ msg”是指<div id="msg"></div> ，其中將顯示來自服務器頁面的消息。

到目前為止，我的ajax函數是：

function callsave() {
    var xmlHttp, FormData;
    xmlHttp = new XMLHttpRequest;
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("msg").innerHTML = xmlHttp.responseText;
        }
    }
    xmlHttp.open("POST", "savechanges.php", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(FormData);
}

表單末尾的提交按鈕是：

<input type="button" value="Save Changes" id="save" onClick="callsave();">

非常感謝您為我指明了正確的方向。 順便說一句，這是我的第一個Ajax編碼。

Answer 1

如果您使用的是jQuery，則可以通過FormData=$('#formId').serialize(), serialize（）將以查詢字符串形式返回所有表單數據，例如“ name = AAA＆action = BBB”

Answer 2

“ ...如何從不同的表單組件中收集所有更新的數據...”

不知道完整表單和處理程序（savechanges.php）中的內容，

您可以使用savechanges.php此片段從表單中提取每個POST值：

foreach ($_POST as $key=>$value) {
    $post_values=$key.": " . $value . "\n";
}

Answer 3

我不確定您的html是什么樣，但是您可以為每個表單按鈕分配一個唯一的ID（可以通過在db中為數據庫中的行分配主鍵來完成此操作），然后提交按鈕，這樣您就可以您需要通過“提交”按鈕的ID提交表單。

例如，如果您的表單html如下所示：

<form id="data-<?php //put the primary key of the row here ?>">
<!-- rest of your form attributes here -->
<input type="Submit" id="submit" class="submit" onClick="callSave(<?php //same primary key as your form?>)" />
</form>

至於ajax，我建議您使用jQuery的$ .ajax函數，因為它比本機js更容易編碼。

你會在callsave函數中做類似的事情

function callSave(formId)
{
   $.ajax({
   type : 'POST',
   url : //your post url,
   data : $("#data" + formId).serialize(),
   success : function(data){
      $("#msg").text(data);
   }
    });
}

設置jQuery很容易。 點擊此鏈接