1

我有一个数据库，其中包含 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 编码。

4

3 回答 3

2

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

于 2013-08-29T04:21:36.477 回答
0

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

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

您可以使用以下代码段从表单中提取每个 POST 值savechanges.php：

foreach ($_POST as $key=>$value) {
    $post_values=$key.": " . $value . "\n";
}
于 2013-08-29T04:20:58.070 回答
0

我不确定您的 html 是什么样的，但您可以为每个表单按钮分配一个唯一的 id（这可以通过在 db 中分配您的行的主键在 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 轻而易举。按照这个链接

于 2013-08-29T04:21:00.430 回答