AJAX 调用使用 .net 内核

Question

当我单击忘记密码链接并在弹出发送帖子请求上发送 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">&times;</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 是否被调用？ 如果我遗漏任何东西，谁能告诉我

Answer 1

我这边没关系。 这可能是由于元素的 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>

Answer 2

我认为这里不需要“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');
        }
    });
});

我认为这会奏效