jQuery在提交之前向表单添加数据数组答案

【问题标题】：jQuery add array of data to form before submitjQuery在提交之前向表单添加数据数组
【发布时间】：2021-05-23 18:18:01
【问题描述】：

我想要实现的是获取现有表单隐藏字段，添加另一个包含数组的字段，然后将其 POST 到服务器，但采用旧方式。我的意思是，在 POST 之后，页面应该像普通表单一样从服务器获取新的 HTML。

我尝试使用$.post()，但这就像一个 AJAX 请求，页面没有从服务器重新加载。

我认为我可以动态添加一个隐藏字段，并在提交之前用我的数组填充它的值。但是这样做可能会被浏览器截断。该数组有时会变得非常大，它是一个包含 CSV 文件数据的字段数组。所以我无法控制数组的长度。如果用户将处理 500 行 CSV，则该数组可能会有大约 2000 个键值。

所以基本上我正在寻找一个像 $.post() 这样的解决方案，我可以通过传递我的数组来填充提交数据，但具有表单的真实行为。页面必须提交并完全替换为服务器响应。我发现了一些用 ajax 响应替换页面的“hacks”，但它们太老套了，而且并不是每个浏览器都适用。

【问题讨论】：

你尝试过 Ajax beforeSend 功能吗？
您所建议的是一个 Ajax 请求。它不会从服务器获取具有更新内容的新页面。通过这样做，我必须用 Javascript 编写响应会发生什么，这会破坏网站开发方式的设计。所有表单提交均采用老式方式 form.submit
我只是想保持表单处理方式的一致性。我想要的最后一件事是在同一过程中同时使用 ajax 和普通提交。服务器端脚本设计为在表单提交后以整页 html 响应。在这种情况下使用 ajax 将使我编写一个 ajax 处理程序来仅发送相关数据，这会使代码变得更糟。
所以你不想在提交表单后使用javascript并移动到新页面。
我想使用 javascript，但脚本必须将我的数组添加到表单中，并从服务器获取新的 html。 html是整页。如果我使用的是 ajax，我需要使用一些讨厌的解决方案来用响应中的新页面替换当前页面 html。并非在每个浏览器中都以相同的方式工作。

标签： jquery

【解决方案1】：

不太清楚你在问什么。听起来像这样？后端使用PHP，虽然这里extradata是一个对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta name="generator" content="BBEdit 13.5" />
     <meta charset="utf-8" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<form action="/process.php" method="post" class="form-example" name = "testform">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <label for="hidden1">hidden1: </label>
    <input type="hidden" name="hidden1" id="hidden1" value = "hidden1" required>
  </div>
  <div class="form-example">
    <label for="hidden2">hidden2: </label>
    <input type="hidden" name="hidden2" id="hidden2" value = "hidden2" required>
  </div>
  <div class="form-example">
    <label for="hiddenarray">hiddenarray: </label>
    <input type="hidden" name="hiddenarray" id="hiddenarray" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>
<script>

var extradata = {
"name1":"value1",
"name2":"value2",
"name3":"value3"
};

$("[name=testform]").on("submit", function(e) {
    $("[name=hiddenarray]").val(JSON.stringify(extradata));
    alert("test");

});

</script>

</body>
</html>

进程.php

<?php
$_POST['hiddenarray'] = json_decode($_POST['hiddenarray']);
echo json_encode($_POST);
?>

【讨论】：

这是我想到的解决方案之一。但是，在被浏览器截断之前，可以进入多少数据？
stackoverflow.com/questions/1752768/…
为了防止页面在提交后重新加载，你必须使用e.preventDefault()
最后，我的实现是这样的。将我的对象插入隐藏字段值。即使通常数据很大（我监控了我的用户如何使用表单），它似乎在 POST 期间也没有被截断。他们成功地导入了 300-500 行长的 CSV，大约 19 列。