表单提交的两种JS实现-优快云博客

本文介绍了使用JavaScript实现表单提交的两种方法：一种是通过`$.post`直接发送POST请求；另一种是通过模拟表单提交的方式进行。文中详细展示了如何设置表单元素及提交逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单提交传值的两种方式：

1. JS中直接 post提交：

<form style="display:none" method="get">
　　<input name="addressId" type="hidden" value="111" />
　　<input name="cartIds" type="hidden" value="222" />
</form>

<script> 
$('.paytbn').click(function () {
　　var cartIds = $('form input[name=cartIds]').val();
　　var addressId = $('form input[name=addressId]').val();
　　var referNo = $('.order-referno').val();
　　var logistics = [];
　　$.each($('select.logistics'), function () {
　　　　var table = $(this).parents('.goods-table');
　　　　var map = table.attr('data-wareid') + '|' + $(this).val();
　　　　logistics.push(map);
　　});

$.post('@Url.Action("SubmitOrder")', { cartIds: cartIds, addressId: addressId, logistics: logistics, referNo: referNo },
function (data) {
    if (data.flag) {
　　    location.href = '@Url.RouteUrl("PaymentOrder")' + "?orderNos=" + data.msg;
    });
});
</script>

2. JS中直接模拟表单submit提交：

<form method="post" style="display:none">
    <input name="QueryWay" type="hidden" />
    <input name="OrderKwd" type="hidden" />
    <input name="OrderStatus" type="hidden" />
</form>

<script>
    $('#btnSubmit').click(function () {
        $('form input[name=QueryWay]').val(1);
        $('form input[name=ExportType]').val(2);
        $('form input[name=StartTime]').val(3);
        $('form').submit();
    });
</script>