[英]How to Ajax POST after a Form Submit
我認為這很簡單,但是我找不到任何方法,正如標題所述,成功提交表單后如何處理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發布。 因此,就像在一個按鈕中發布兩次一樣,不同之處在於另一個是表單提交,而另一個是ajax發布。 PLS幫助。
您應該做的是使用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中進行操作成功數據。 例如,您可以使用它直接向用戶傳遞驗證消息,而無需刷新站點。 等等...
我不確定您要做什么,提交頁面后將要重新加載頁面的ajax請求的意義是什么。
但是,如果需要在提交表單后執行ajax請求,則只需要一個ajax調用即可。 但這將在每次頁面加載時都起作用。
我認為您需要做兩個ajax請求,第一個是提交表單,如果調用成功,則調用第二個請求。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.