Php 单击链接时使用ajax保存大型多维表单

我在网上商店中设置ajax调用时遇到了很多麻烦

整个订单系统相当大。集合被划分为类别，类别被划分为产品。产品分为三种尺寸：S、M和L

对于每个集合，订单形式如下所示：

echo '<form name="input" action="processing.php" method="POST">';

foreach ($categories as $category) {
    foreach ($productids as $productid) {
        echo '<input type="text" name="input['.$productid.'][s]" />';
        echo '<input type="text" name="input['.$productid.'][m]" />';
        echo '<input type="text" name="input['.$productid.'][l]" />';
    }
}

echo '</form>';

像这样设置表单非常方便，因为所有输入都在$\u POST['input']数组中

在页面顶部，有几个指向不同收藏的链接。当用户单击链接时，我希望通过ajax将当前集合输入字段的所有数据传递到php文件，以便将其保存到数据库中

链接的标记：

<a href="index.php?action=order&collection=2" class="changecoll">Collection 2</a>

我有两个问题：

如何通过jquery.ajax调用将如此多的输入传递给processing.php？在数据参数中输入什么？ 单击链接时触发jquery.ajax调用是否是解决此问题的正确方法？

---

首先，在您给出的示例中，您需要转义s、m和l周围的单引号，因为这将导致错误

你为什么要保存一切？如果是这样，用户可以重新访问它，那么在没有明确请求的情况下保存它真的值得吗

ajax中的数据参数很简单，只需给表单一个id，然后像这样获取数据

var formData = $('form#formId').serialize();

现在在ajax调用中，只需将formData传递给data

---

然而，我仍然很好奇这些表单到底包含什么，以及为什么需要保存它。

您可能会这样做：

PHP:

HTML/JS：

<a href="index.php?action=order&collection=2" class="changecoll">Collection 2</a>

<script type="text/javascript">
<!--
    $(".changecoll").click(function(e) {
        e.preventDefault();

        var data = {};

        $("input[name^='input']").each(function(i, el) {
            var tmp = el.split("_");
            data[tmp[1] +"_" + tmp[2]] = $(el).val();
        });

        $.ajax({
            type: "POST",
            url: "save.php",
            data: {
                input: JSON.stringify(data)
            },
            success: function() {
                document.location.href = $(this).attr("href");
            }
        });
    });
-->
</script>

---

如果有很多数据，我会通过JSON发送。在单击事件时发送jQuery.ajax，我认为提交按钮或类似的按钮也是我应该做的。看来你对我来说是对的。插件将序列化您的表单并执行ajax请求。当然，您需要进行配置。

<a href="index.php?action=order&collection=2" class="changecoll">Collection 2</a>

<script type="text/javascript">
<!--
    $(".changecoll").click(function(e) {
        e.preventDefault();

        var data = {};

        $("input[name^='input']").each(function(i, el) {
            var tmp = el.split("_");
            data[tmp[1] +"_" + tmp[2]] = $(el).val();
        });

        $.ajax({
            type: "POST",
            url: "save.php",
            data: {
                input: JSON.stringify(data)
            },
            success: function() {
                document.location.href = $(this).attr("href");
            }
        });
    });
-->
</script>