表单提交后如何进行Ajax POST

Question

我认为这很简单，但是正如标题所示，在任何地方都找不到如何执行此操作的方法，就像成功提交表单后如何处理ajax一样。我尝试搜索它，但所看到的只是我需要的相反内容，即在ajax发布后提交。我将尝试草拟与Im正在研究的程序非常相似的程序。
这是我的表格。

<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发布。PLS帮助。

Answer 1

您应该做的是使用jQuery“接管提交按钮”，然后在内部使用ajax调用。

例如，具有此提交按钮：

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

并通过ajax调用使用jQuery Submit函数，应该给您一个很好的主意。

$('#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中进行操作成功数据。例如，您可以使用它直接将验证消息传递给您的用户，而无需刷新您的网站。等等…