如何发送更复杂的POST表单？

Question

我有下表，用户可以为相应的项目选择一些数量。

在不使用JavaScript的情况下将此数据发送到服务器的最简单方法是什么？

现在我在每个数量输入字段上创建一个带有项目名称的data-name。然后抓取所有这些输入字段，然后是$.post请求（此处未显示）。

var items = [];
var $quantities = $('.quantity');
$.each($quantities, function(index, input) {
  items.push({
    name: $(input).data('name'),
    quantity: $(input).val()
  });
});

我很想知道只使用HTML form元素是否有更优雅的方法。

编辑：我可以自由选择我认为合适的模型。没有限制，因为这是一个新的个人项目。

Answer 1

如果将项目名称放入表单中的隐藏输入字段，则可以使用：

$('#formID').serialize()

一步获取所有输入，并将其作为数据参数传递给$.post()。

Answer 2

您可以创建传统的HTML表单。

<form method="post" action="/url/to/submit/to.php" id="orderform">
    <table>
        ... all your order table code ...
        <input type="text" name="cucumber" value="0">
        ... and all your input code ....
        ... etc ...
    </table>
</form>

然后让操作URL成为服务器端脚本，处理表单数据并返回适当的网页。注意：这将需要重新加载网页。

JavaScript的优点是你可以提交表单数据而不必重新加载网页。

另请注意，您可以非常轻松地使用jQuery获取HTML表单数据。在上面的例子中：

var formData = $('#orderform').serializeArray();

现在使用可以在$ .post（）脚本中使用formData。

Answer 3

通过这种方式，您可以使用ajax

发送表单数据

$.ajax({
                            url:'TarfetPage.jsp',
                            type:'POST',
                            datatype:'text',
                            data:$('#formID').serialize(),
                            success:function(data)
                            {
                                $("#divId").html($.trim(data));
                            }
                        });