使用 jquery submit() 函数防止表单提交的 URL 更改

Question

您好，我编写了一个 jquery 代码，我在单击按钮时使用 jquery submit() 函数提交表单。 但是随着表单提交 Url 正在发生变化，我不希望我的 url 被更改，我也不想使用 ajax，因为我需要刷新页面以获取最新数据提交后的行。

下面是附上url的sn-p代码和图片

$("#itemupdateModelForm").click(function(event) {
        event.preventDefault(); // avoid to execute the actual submit of the form.
        return false;
    });

    $(".itemupdateButton").click(function(event) {
        event.preventDefault(); // avoid to execute the actual submit of the form.
        var form = $('#itemupdateModelForm');
        var url = form.attr('action');
        var newUrl = url + currentRowItemId;
        form.attr('action',newUrl);
        $( "#itemupdateModelForm" ).submit();
        return false;
    });

提交表单后

我希望我的 url 在提交没有 ajax 的表单后保持不变 下面是模型表格

<div class="col-xl-8 col-lg-7">
<div class="itemUpdateTaskForm">
   <form th:action="@{/category/{id}/item/(id=${categoryId})}" th:method="post" th:object=${updateItemModel} id="itemupdateModelForm">               
        <div class="modal fade" id="updateTaskModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel" th:text="${categoryName}">Edit</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">Current Stock Quantity:</label>
                            <input th:field="*{currentStockQuantity}" value="" type="text" class="form-control" id="crntstckqnty" name="currentstockquantity" placeholder="currentstockquantity" readonly="readonly"/>
                        </div>
                        <div class="form-group">
                            <label for="title">Item Price:</label>
                            <input th:field="*{currentPurchasePrice}" value="" type="text" class="form-control" id="current_item_price" name="current_item_price" placeholder="Current Item Price" />
                        </div>
                        <div class="form-group">
                            <label for="status">Unit:</label>
                            <select id="unit" class="form-control" name="unit" th:field=*{unit}>
                                <option th:each="status : ${T(com.inventory.domain.ItemWeightUnit).values()}"
                                        th:text="${status}" th:value="${status}">
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="title">Take Item:</label>
                            <input th:field="*{updatedQuantity}" value="" type="text" class="form-control" id="updatedQuantity" name="updatedQuantity" placeholder="updateQuantity"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <input type="button" class="btn btn-primary itemupdateButton" value="save"/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

您可以在记录更新成功后重新加载您的页面，如下所示，我使用了 javascript。

window.location.reload(true);

here is reference link

Answer 2

如果您不想使用 AJAX，则需要执行 GET/POST 请求。

最简单的方法是从接收表单数据的页面重定向到原始页面。

也就是说，一旦/category/1/item/9 处理完表单数据，就重定向到/categ/Masala。这样，您希望获得最新数据的刷新也将完成。

另一种方法是在与表单相同的 URL 中处理数据，但使用不同的方法（POST 而不是 GET），或者依赖像 这样的逻辑，如果发布数据可用，则处理它，如果没有，显示表单，但您仍然需要重定向或呈现页面。