MVC三两下搞定Ajax，手机短信验证码轻松发送！

2023-11-09 07:45:19

使用 Ajax 在 .NET MVC 中实现发送手机短信验证码

获取手机号码

在用户界面上获取手机号码至关重要，以便我们能够向用户发送验证码。为此，可以在视图中添加一个输入框：

<input type="text" id="phoneNumber" placeholder="请输入手机号码" />

编写控制器方法

接下来，在控制器中添加一个用于发送验证码的方法：

[HttpPost]
public ActionResult SendVerificationCode(string phoneNumber)
{
    // 生成验证码
    string verificationCode = GenerateVerificationCode();

    // 发送验证码到手机号码
    SendVerificationCode(phoneNumber, verificationCode);

    // 返回成功状态
    return Json(new { success = true });
}

发送验证码

将验证码发送到手机号码需要第三方短信服务。以下代码演示了如何使用示例短信服务：

private void SendVerificationCode(string phoneNumber, string verificationCode)
{
    // 这里使用第三方短信服务发送验证码，具体实现取决于所选的服务商
    // 示例代码：
    SmsService.SendVerificationCode(phoneNumber, verificationCode);
}

编写 Ajax 请求

在前端页面，使用 jQuery 发起 Ajax 请求：

$("#sendVerificationCodeButton").click(function () {
    var phoneNumber = $("#phoneNumber").val();

    $.ajax({
        type: "POST",
        url: "/Account/SendVerificationCode",
        data: { phoneNumber: phoneNumber },
        success: function (response) {
            if (response.success) {
                alert("验证码已发送至您的手机号码。");
            } else {
                alert("发送验证码失败，请稍后重试。");
            }
        }
    });
});