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

【问题标题】：Saving large, multidimensional forms with ajax when a link is clicked单击链接时使用 ajax 保存大型多维表单
【发布时间】：2013-12-17 17:42:43
【问题描述】：

我在网上商店设置 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>';

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

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

链接标记：

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

我有两个问题：

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

【问题讨论】：

如果数据很多，我会通过 JSON 发送。在单击事件时发送 jQuery.ajax（我假设是 SUBMIT 按钮或类似的）也是我会做的。对我来说，您似乎走在正确的轨道上。
This 插件将序列化您的表单并执行 ajax 请求。您当然需要进行配置。

标签： php ajax forms jquery

【解决方案1】：

你可能会这样做：

PHP：

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>';

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>

【讨论】：

【解决方案2】：

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

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

jQuery.ajax() 中的数据参数很简单，只要给你的表单一个id，然后像这样抓取数据

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

现在在您的 ajax 调用中，只需将 formData 传递给数据。

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

【讨论】：