JQuery/ajax完成登录页面

最新推荐文章于 2022-04-26 11:31:43 发布
VIP文章 最新推荐文章于 2022-04-26 11:31:43 发布
阅读量1.7k 收藏 14
点赞数 1
文章标签： ajax jquery 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57860459/article/details/122318986
版权
  1. 输入手机号码, 点击获取验证按钮, 发送请求到服务器去获取验证码, 然后开始倒计时
  2. 输入验证码, 点击登录, 发送请求到服务器去登录, 成功后跳转到个人中心页面
  3. 登录成功之后, 将手机号码存储本地缓存
  4. 个人中心页面: 获取本地缓存的手机号码, 有号码则显示电话号码, 没有号码, 显示立即登录

接口:

获取验证码接口:

地址: http://huruqing.cn:3003/user/getSmsCode 请求参数: phone

请求方法: get

登录接口:

接口地址: http://huruqing.cn:3003/user/login

请求方法: post

请求参数: phone: xxx, smsCode:xxx

思路:

点击获取验证码, 要做什么事情

  1. 检查电话号码是否为空, 长度是不是11
  2. 发送请求到服务器, 获取验证码
  3. 按钮倒计时

点击登录的逻辑

  1. 获取手机号码和验证码
  2. 把号码和验证码发送到服务器去登录
  3. 登录成功后, 把手机号码缓存起来, 跳转到个人中心页面

个人中心页面逻辑

  1. 从缓存获取手机号码
  2. 有号码, 就显示号码, 显示退出登录按钮, 隐藏立即登录按钮
  3. 若无号码, 就显示立即登录按钮, 隐藏手机号码和退出登录按钮

点击退出登录逻辑

  1. 清除缓存里的手机号码
  2. 显示立即登录
  3. 清空并隐藏手机号码, 隐藏退出登录按钮
<!-- 个人中心代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset&
最低0.47元/天 解锁文章
超级小丑_Supclown
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jQuery Ajax 登陆和注册页面
06-01
带有自动验证插件，
用JQuery来做Ajax的用户登录操作，较为完整(JavaWeb)
曾小超的博客
02-27 2465
1.概念：异步的JS和XML 2.构成：JS/DOM，CSS，XML，XMLHttpRequest 3.作用： 以往的方式：请求--web服务器--响应--再请求--web服务器--响应 表单提交--web服务器处理--响应（转发、重定向、流输出）--输出HTML(同步传输) 问题：在网络不好时，表单提交容易造成屏幕白屏，处于等待状态 AJAX技术：如何解决呢？ 1、通过AJAX提交...
用ajax实现登陆验证,jquery ajax 登录验证实现代码
weixin_29612623的博客
08-05 188
使用 jquery 框架：下载 jquery.js新建一个 web 工程 ajax ；在 webRoot 下新建一个 jslib 文件夹：专门存放 js 文件；在 webRoot 下新建一个 html/jsp 页面：login.html script> 用户校验 在 jslib 下新建一个 js 文件：verify.js ；function verify(){var paramObj=encode...
jQuery 简单实现ajax 登录功能
Code-zyc的博客
04-05 2226
文章目录第一步导入jQuery第二步 后端代码第三步 前端页面 第一步导入jQuery <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 第二步 后端代码 注意要加 @ResponseBody 注解 不然前端 收不到data @RequestMapping("/login") @ResponseBody public MessageResult
JqueryAjax登录实现
WER1234S
01-10 893
一个完整的Ajax提交(POST) 前台(JqueryAjax) $(function(){ $('.dl_btn').click(function(){ $.ajax({ type: "POST", // 提交方式 POST dataType : "json",
jQuery实现监控页面所有ajax请求的方法
10-23
主要介绍了jQuery实现监控页面所有ajax请求的方法,涉及jQuery中ajax请求的判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Jquery、Ajax、Struts2完成定时刷新的方法
10-27
今天一个需求，需要在页面上动态显示后台程序执行的进度，那么在页面上会定时刷新，使用了Jquery、Ajax、Struts2。直接上代码：
jQuery Ajax之load()方法
01-19
load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为： 　load( url [, data][, callback] ) 　load()方法参数解释见下表： 参数名称 类　型 说　明 url String ...
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
12-03
做了几个兼职，上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新，后退，前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效，有的时候会...
jquery实现登录成功界面_jquery实现用户登陆界面(示例讲解)
weixin_39997089的博客
12-21 1162
实例如下所示：var cnresu = false;$(function(){$("input[name='uname']").blur(function(){//blur从链接上移开焦点(鼠标离开框时)var unamestr = $(this).val();var regstr = /^[\u4e00-\u9fa5]{2,4}$/;if(!regstr.test(unamestr)){$(th...
jquery超炫的登录界面
08-24
一款超炫的登录界面，带动画效果
jQuery+ajax实现简单登录验证
12-13
本人亲自写的jQuery+ajax实现登录验证，内含两个项目，注释清晰，特来和大家分享
Jquery+Ajax实现的前台登陆验证（
09-20
通过Jquery实现的前台输入验证，用Ajax传输到Servlet 再使用DButils开源库实现数据库查询 返回结果 适合初学者学习
jq+ajax登录界面
11-25
用jq+ajax登录界面进入验证，可以用从数据库中提取出来再判断登录的用名及密码。
JQUery超炫登录界面login
02-25
用JQUery实现的超炫登录界面login
用户登陆界面(jquery)
weixin_30388677的博客
09-05 232
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script src="js/jquer...
jquery ajax 登录 java_jQuery+Ajax用户登录功能的实现
weixin_31960565的博客
02-17 389
ok，先来贴几张张效果图。其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口，该窗口通过iframe调用Login.aspx页面，用户输入用户名密码和验证码后，Login.aspx页面的jQuery代码post到Login.ashx页面处理，Login.ashx页面可以算是简易的aspx页面吧。当然你用LoginProcess.aspx 也是可以的。Login.ashx页面处理完把结...
JQuery与AJAX制作的登录小案例（了解其中的每一个步骤）
qq_51066068的博客
04-26 597
JQuery与AJAX制作的登录小案例（了解其中的每一个步骤） 模拟登录的几大步骤（必知） 需要自己花时间多看看 实现效果：登录获取token，获取用户信息 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
jquery ajax 登录
gts_0901y的博客
11-09 280
$('img').click(function(){           $('img').attr('src','php/getVerify.php?'+Math.random());//刷新验证码       })       $('#login').click(function(){           var username=$('#user-name').val();    
请使用jQuery操作Ajax完成登录界面，输入用户名和密码（用户名和密码自己拟定），单击登录按钮
最新发布
05-30
好的，以下是一个使用jQuery操作Ajax完成登录界面验证的示例代码： HTML代码： ``` <form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <button id="login-btn" type="submit">登录</button> </form> <div id="result"></div> ``` JavaScript代码： ``` $(function() { // 绑定登录按钮点击事件 $('#login-btn').on('click', function(e) { e.preventDefault(); // 阻止表单默认提交事件 // 获取用户名和密码输入框的值 var username = $('#username').val(); var password = $('#password').val(); // 发送Ajax请求验证用户名和密码 $.ajax({ url: '/login', // 登录验证接口地址 method: 'POST', data: { username: username, password: password }, // 发送的数据 success: function(data) { // 验证成功 $('#result').text('登录成功'); }, error: function(xhr, status, error) { // 验证失败 $('#result').text('登录失败：' + error); } }); }); }); ``` 其中，登录验证接口地址为'/login'，可以根据实际情况进行修改。在接口中，需要对用户名和密码进行验证，验证成功返回200状态码，验证失败返回401状态码。如果验证成功，前端页面会显示'登录成功'，如果验证失败，则会显示'登录失败'和错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级小丑_Supclown

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值