[英]AJAX calls using .net core
當我單擊忘記密碼鏈接並在彈出發送帖子請求上發送 email 按鈕並移動到下一個彈出窗口以驗證 OTP 時,我想打開一個彈出窗口
觸發模式打開的鏈接
<label class="flex">Password <a href="#" class="ml-auto small" data-toggle="modal" data-target="#modal-1">Forget Password?</a></label>
模態彈出代碼
<div class="modal fade" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal 1</p>
<input id="forgotPasswordEmail" type="text" class="form-control" placeholder="Email" required>
@*<a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next ></a>*@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="sendOTP" type="button" class="btn btn-primary" >Send email</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
AJAX 調用 asp.net 內核 controller
<script type="text/javascript">
$("#sendOTP").click(function (e) {
alert("Hi");
e.preventDefault();
$.ajax({
type: "POST",
url: "/Auth/ForgetPassword/",
data: {
userName: $("#forgotPasswordEmail").val()
},
success: function (result) {
alert(result);
},
error: function (result) {
alert('error');
}
});
});
</script>
但問題是 function 沒有被觸發,因為我添加了一個警報來獲取 AJAX function 是否被調用? 如果我遺漏任何東西,誰能告訴我
我這邊沒關系。 這可能是由於元素的 id 沖突造成的。 您是否有任何其他具有相同 id sendOTP
的元素。 您可以嘗試使用名稱選擇器。
<button id="sendOTP" name="sendOTP" type="button" class="btn btn-primary" >Send email</button>
<script type="text/javascript">
$("[name=sendOTP]").click(function (e) {
alert("Hi");
e.preventDefault();
$.ajax({
type: "POST",
url: "/Auth/ForgetPassword/",
data: {
userName: $("#forgotPasswordEmail").val()
},
success: function (result) {
alert(result);
},
error: function (result) {
alert('error');
}
});
});
</script>
更新:
<button id="sendOTP" onclick="sendOTP()" type="button" class="btn btn-primary">Send email</button>
<script type="text/javascript">
function sendOTP() {
alert("Hi");
$.ajax({
type: "POST",
url: "/Auth/ForgetPassword/",
data: {
userName: $("#forgotPasswordEmail").val()
},
success: function (result) {
alert(result);
},
error: function (result) {
alert('error');
}
});
}
</script>
我認為這里不需要“e.preventDefault()”,因為我們通常在通過 onSubmit 屬性提交表單時使用它,您可以定義您的 function 和事件監聽器,如下所示,我認為它會起作用。
$("#buttonId or...").click(function () {
alert("Hi");
$.ajax({
type: "POST",
url: "/Auth/ForgetPassword/",
data: {
userName: $("#forgotPasswordEmail").val()
},
success: function (result) {
alert(result);
},
error: function (result) {
alert('error');
}
});
});
我認為這會奏效
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.