我正在尝试使用具有一个输入和AJAX的html表单发送发布请求。但是结果根本不是我想要的。首先,它发送一个Get请求,其次,它没有命中我想要的API端点。它应该将表单发布到我的endpoind('/ Account / SendConfirmPhoneNumber'),然后我想对它的结果进行任何处理? 这是我的html(C#Razor):
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="newRegister-helpText">
<p>
enter the code
</p>
</div>
<form class="newRegister-formBox" id="confirmPhoneNumberForm" autocomplete="off">
<div class="formElement newRegister-input">
<i class="fa fa-key"></i>
<input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput" placeholder="enter the key" >
<div class="newRegister-alarmText">
<p>
60 seconds
</p>
<button class="animateBtn" type="button" id="Resend-confirm-phone-number-code">
<i class="fa fa-refresh"></i>
sendagain
</button>
</div>
</div>
<div class="newRegister-button">
<button id="send-confirm-phone-number-code" class="animateBtn">
<i class="fa fa-check"></i>
submit
</button>
</div>
</form>
</div>
这是我的JavaScript文件:
window.$view = window.$view || {};
window.$collections = window.$collections || {};
window.$utils = window.$utils || {};
// ================== UserProfileDetails ==============================
$view.UserProfile_ConfirmPhoneNumber = Backbone.View.extend({
el: '#confirmPhoneNumber',
events: {
"click #send-confirm-phone-number-code": "sendConfirmPhoneNumberCode",
"click #admin-send-confirm-phone-number-code": "adminSendConfirmPhoneNumberCode"
},
initialize: function () {
this.loadConfirmPhoneNumberValidation();
this.render();
},
modelChanged: function () {
},
sendConfirmPhoneNumberCode: function () {
var self = this;
var $form = $("#confirmPhoneNumberForm");
$.ajax({
url: '/Account/SendConfirmPhoneNumber',
datatype: "json",
type: "POST",
data: $form.serialize(),
beforeSend: function () {
$utils.showLoader();
},
error: function (xhr, ajaxOptions, thrownError) {
self.showErrorMessage(xhr.responseText);
},
success: function (data, text) {
if (data.ResultCode == 400) {
self.showErrorMessage(data.Message);
} else if (data.ResultCode == 200) {
self.showSuccessMessage($utils.messages.user.reSend_ConfirmPhoneNumberCode);
self.enableDisableResendConfirmPhoneNumberCode();
}
},
complete: function () {
$utils.hideLoader();
}
});
},
adminSendConfirmPhoneNumberCode: function () {
var self = this;
var $form = $("#confirmPhoneNumberForm");
$.ajax({
url: '/Account/SendVerificationCodeByPhone',
datatype: "json",
type: "POST",
data: $form.serialize(),
beforeSend: function () {
$utils.showLoader();
},
error: function (xhr, ajaxOptions, thrownError) {
self.showErrorMessage(xhr.responseText);
},
success: function (data, text) {
if (data.ResultCode == 400) {
self.showErrorMessage(data.Message);
} else if (data.ResultCode == 200) {
self.showSuccessMessage(data.Message);
self.enableDisableResendConfirmPhoneNumberCode();
}
$("#simpleMessageWarning").hide();
},
complete: function () {
$utils.hideLoader();
}
});
},
enableDisableResendConfirmPhoneNumberCode: function (message) {
$utils.showCounter();
$utils.enableDisableResendButton("#send-confirm-phone-number-code", "#admin-send-confirm-phone-number-code");
},
loadConfirmPhoneNumberValidation: function () {
var self = this;
this.$("#confirmPhoneNumberForm").validate({
rules: {
code: {
required: true,
minlength: 4
}
},
messages: {
code: {
required: $utils.messages.user.required_ConfirmPhoneNumberCode,
minlength: $utils.messages.user.minlength_ConfirmPhoneNumberCode
}
},
submitHandler: function (form) {
var $form = $(form);
var validator = $form.data("validator");
if (!validator || !$form.valid())
return;
$.ajax({
url: '/Account/ConfirmPhoneNumber',
datatype: "json",
type: "POST",
data: $form.serialize(),
beforeSend: function () {
$utils.showLoader();
},
error: function (xhr, ajaxOptions, thrownError) {
self.showErrorMessage(xhr.responseText);
},
success: function (data, text) {
if (data.ResultCode == 400) {
self.showErrorMessage(data.Message);
} else if (data.ResultCode == 200) {
self.showSuccessMessage(data.Message);
setTimeout(function () { window.location.href = $("#ReturnUrl").val().length > 0 ? $("#ReturnUrl").val() : "/"; }, 3000);
return;
}
},
complete: function () {
$utils.hideLoader();
}
});
return;
}
});
},
showSuccessMessage: function (message) {
$("#sendConfirmPhoneNumberCodeError").hide();
var element = $("#sendConfirmPhoneNumberCodeSuccess");
$utils.showMessage(element, message);
},
showErrorMessage: function (message) {
$("#sendConfirmPhoneNumberCodeSuccess").hide();
var element = $("#sendConfirmPhoneNumberCodeError");
$utils.showMessage(element, message);
},
render: function () {
$("#sendConfirmPhoneNumberCodeSuccess").hide();
$("#sendConfirmPhoneNumberCodeError").hide();
var element = $("#sendConfirmPhoneNumberCodeSuccess");
$utils.showMessage(element, $utils.messages.user.send_ConfirmPhoneNumberCode);
$utils.scrollTopAnimate(element, 1000, 0);
}
});
// ================================================
$(document).ready(function () {
var pdView = new $view.UserProfile_ConfirmPhoneNumber();
});