如何在表单提交后进行 Ajax POST答案

【问题标题】：How to Ajax POST after a Form Submit如何在表单提交后进行 Ajax POST
【发布时间】：2015-04-29 06:18:53
【问题描述】：

我认为这很简单，但我在任何地方都找不到如何做到这一点，正如标题所说，你如何在成功提交表单发布后进行 ajax 发布。我试图搜索它，但我所看到的只是我需要在 ajax 帖子之后提交的相反。我将尝试制作一个与我正在做的非常相似的程序草稿。
这是我的表格。

<h2>My Form </h2>
@using (Html.BeginForm(new { @class = "submitForm" }))
{
    <label>Loan Amount</label>
    @Html.DropDownListFor(model => model.Loan.LoanAmount, Model.DropDownOfLoanAmount, new { @class = "LoanAmount", @data_bind = "value: selectedLoanAmount" })
    @Html.ValidationMessageFor(model => model.Loan.LoanAmount)

    <label>Loan Receivable</label>
    @Html.TextBoxFor(model => model.Loan.LoanReceivable, "{0:0,0.00}", new { @class = "LoanReceivable", @readonly = true, dir = "rtl", @data_bind = "value: loanReceivable" })
    @Html.ValidationMessageFor(model => model.Loan.LoanReceivable)

    <label>Interest</label>
    @Html.TextBoxFor(model => model.Loan.Interest, "{0:0,0.00}", new { @readonly = true, @class = "Interest", dir = "rtl", @data_bind = "value: interest" })

    <table class="input-group">
        <tbody data-bind="foreach: loanDeductions">
            <tr>
                <td><strong data-bind='text: deductionName'></strong></td>
                <td>
                    <input class="deductionCode form-control" data-bind='value: amount, valueUpdate: "afterkeydown"' /></td>
                <td><a href='#' data-bind='click: $parent.removeLine'>Delete</a></td>
            </tr>
        </tbody>
    </table>

    <button type="button" class="btn btn-danger">Save Deduction</button>

    <button type="submit" class="btn btn-primary">Save changes</button>
}

这是一个示例 ajax 帖子（不要介意帖子的逻辑）：

$.ajax({
 'url' :'@Url.Action("UpdateDeductionValues","LoanApp")',
 'data': {amount : $('.LoanAmount').val()},
 'success': function(result) {
 $.each(result, function (idx, items) {
 $('.' + items.Code + '').val(items.Amount.toFixed(2));
  });
  }});

现在我想要发生的是当我提交该表单时，如果提交成功，则触发 ajax 发布。所以它就像在一个按钮中发布 2 次，不同之处在于另一个是表单提交，另一个是 ajax 发布。请帮忙。

【问题讨论】：

正常提交时，您会离开页面（没有要运行的代码）。
@StephenMuecke 所以我想做的是不可能的？你能建议一个解决方法吗？
为什么不将 Ajax 数据包含到表单数据中，或者反过来呢？
@Robert 你能给我做一个简短的演示吗，对不起，我是初学者
你真正想要达到什么目的？为什么不先进行ajax调用？或者只是返回视图或使用新数据在 POST 方法中重定向到另一个视图。

标签： javascript ajax asp.net-mvc

【解决方案1】：

你应该做的是用你的jQuery“接管提交按钮”，然后在里面使用一个ajax调用。

例如有这个提交按钮：

<input type="submit" value="Submit" onsubmit="$('#your-form-id-here').submit()">

有了这个带有 ajax 调用的 jQuery 提交函数，应该可以让您很好地了解该做什么。

$('#your-form-id-here').submit(function (e) {

    e.preventDefault();
    var senddata = $(this).serializeArray();
    var sendto = $(this).attr("action");

    $.ajax({
        url: sendto,
        type: 'POST',
        data: senddata,
        success: function (data) {
            $('.messages').html(data);
        },
        error: function (error) {
            $('.messages').html(error);
        }
    });
});

这基本上采用您的正常表单，并通过您的 ajax 调用将其发送到您的正常表单操作，所以基本上它就像正常一样工作，但是您现在有机会在表单操作 php 文件中做一些事情，而且在您的 ajax 成功数据中。例如，您可以使用它直接向您的用户发送验证消息，而无需刷新您的站点。等等……

【讨论】：

我不知道我试图实现的目标是先正常提交无法实现的，这是一个很好的解决方法。谢啦。抱歉，我对学习 Web 开发很陌生
我很高兴你可以使用它，我不太擅长解释事情......但是...... :)

【解决方案2】：

我不确定您要做什么，提交表单后执行 ajax 请求有什么意义，页面无论如何都会重新加载。

但是，如果需要在提交表单后执行 ajax 请求，您只需要一个 ajax 调用。但这将在每次页面加载时都有效。

我认为您需要做两个 ajax 请求，第一个用于提交表单，如果调用成功，则调用第二个请求。

【讨论】：