为 ajax 提交收集表单数据答案

【问题标题】：Collect form data for ajax submission为 ajax 提交收集表单数据
【发布时间】：2013-09-01 08:46:50
【问题描述】：

我有一个数据库，其中包含 50 多个需要检查和可能编辑的项目。我有一个网页，它使用 php 从数据库中提取数据并将其显示为网络表单中的值。然后我在页面底部有一系列提交按钮，具体取决于用户想要做什么。每个按钮都使用一个 onclick 方法来调用一个 javascript 函数。

在需要进行一些更改的情况下，用户将直接在网络表单中进行编辑。例如，在一个 textarea 中，textarea 的值将显示数据库项的当前内容。然后用户可以编辑内容。单击“保存更改”按钮调用 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 编码。

【问题讨论】：

标签： php javascript html ajax

【解决方案1】：

“...如何从不同的表单组件中收集所有更新的数据...”

在不知道完整表单和处理程序 (savechanges.php) 中的内容的情况下，

您可以使用savechanges.php 中的这个 sn-p 从表单中提取每个 POST 值：

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

【讨论】：

【解决方案2】：

我不确定你的 html 是什么样的，但你可以为每个表单按钮分配一个唯一的 id（这可以在 php 中通过分配数据库中行的主键来完成）并提交按钮，这样你可以从提交按钮的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 更容易编码。

你会在你的调用保存函数中做类似的事情

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

设置 jQuery 轻而易举。关注this link

【讨论】：

【解决方案3】：

如果你使用 jQuery，FormData=$('#formId').serialize(), 可以很容易 serialize() 将以查询字符串样式返回所有表单数据，例如“name=AAA&action=BBB”

【讨论】：

谢谢，除了没有$.param 外，这行得通。不知道为什么。 FormData=$('#FormName').serialize() 完美运行。
@John 没错，serialize() 的返回结果就像查询字符串一样，所以不需要使用 $.param()。我已经更新了我的答案。