jQuery中使用Ajax发送验证码-Jquery-前端日记簿

首页 Jquery 正文

jQuery中使用Ajax发送验证码

2023-10-06 96

发送验证码

我们可以从网易云中提供的接口中去发送验证码可以看到有一个必选参数为手机号码

我们在发送Ajax请求的时候需要传递一个参数过去

在视图层当中去写一个input框去写手机号码然后点击button去发送请求

在点击完按钮之后将input里面的内容添加一个变量当中控制台输出查看

在进行Ajax请求之前判断一下号码不是空字符串跟长度为11

然后在Ajax中写入我们的发送验证码接口路径类型为post 在data中传入我们需要的参数即可获取验证码

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发送短信验证码</title>
  </head>
  <body>
    <input type="text" id="phone" />
    <button id="getCode">获取验证码</button>
  </body>
</html>
<script src="../js/jquery.js"></script>
<script>
  $("#getCode").click(function () {
    let phone = $("#phone").val();
    console.log(phone);
    if (phone != "" && phone.length == 11) {
      $.ajax({
        url: "http://localhost:3000/captcha/sent",
        type: "POST",
        data: { phone: phone },
        success: function (data) {
          alert(data);
        },
      });
    }
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=79

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。