收集表單數據爲ajax提交

我有一個數據庫中有超過50個項目需要檢查，並可能編輯。我有一個網頁，使用PHP從數據庫中提取數據，並將其顯示爲網絡表單中的值。然後，我在頁面底部有一系列提交按鈕，具體取決於用戶想要做什麼。每個按鈕都使用onclick方法來調用JavaScript函數。收集表單數據爲ajax提交

在需要進行一些更改的情況下，用戶將直接在網絡表單中進行編輯。例如，在textarea中，textarea的值將顯示數據庫項目的當前內容。用戶可以編輯內容。點擊「Save Changes」按鈕調用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編碼。

來源

2013-08-29 John

如果你使用jQuery，它可以通過FormData=$('#formId').serialize(), 連載（容易）將返回所有表單數據的查詢字符串風格，像「名稱= AAA &行動= BBB」

來源

2013-08-29 04:21:36 Teddy

謝謝，這個工作除非沒有'$ .param'。不知道爲什麼。 'FormData = $（'＃FormName'）。serialize（）'完美地工作。 – John

@John你是對的，serialize（）的返回結果就像查詢字符串，所以不需要使用$ .param（）。我已經更新了我的答案。 – Teddy

「......如何從不同的表單組件收集所有的更新數據...」

不知道什麼是你的完整的形式內，你的處理器（savechanges.php ），

您可以通過使用這個片段在savechanges.php拉從表單POST的每個值：

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

來源

2013-08-29 04:20:58

我不確定你的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>

至於阿賈克斯，我會建議你使用jQuery的$就功能比原生JS其更容易代碼。

，你會做這樣的事情在你的callsave功能

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

設置jQuery是一件輕而易舉的事。按照this link

來源

2013-08-29 04:21:00

收集表單數據爲ajax提交

回答

相關問題