时间戳

首页 > 解决方案 > jQuery在提交之前将数据数组添加到表单

jquery - jQuery在提交之前将数据数组添加到表单

问题描述

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

我尝试使用$.post()，但这就像 AJAX 请求一样工作，页面不会从服务器重新加载。

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

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

标签： jquery

解决方案

不太确定你在问什么。听起来像这样？后端使用 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);
?>

推荐阅读