关于 ajax 验证用户名是否存在，用户名密码是否错误的思考

最新推荐文章于 2022-05-20 15:41:49 发布
最新推荐文章于 2022-05-20 15:41:49 发布
阅读量549 收藏
点赞数
分类专栏： JavaScript 文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41705396/article/details/104485533
版权

问题多的引出

使用ajax 验证用户名和密码

1）验证用户名是否存在
2）验证密码是否正确

在这个过程中出现了一个问题：在写ajax的时候，涉及到了一个字段 async，是否采用同步的问题
我采用的验证触发ajax的时机 是 form表单的 onsubmit 属性；

问题表现为：当设置 async 这个字段为 true 即采用 同步的方式进行验证，出现的结果：第一点击登录的时候，浏览器会被锁住，再次点击登录，才会登录成功
思考：

1）采用 onsubmit 方式触发 ajax验证====只有在点击登录按钮的时候，才会触发ajax的代码，但是验证数据涉及到了数据库的查询操作，是不可能瞬间把验证 的结果待会给回调函数的，就是说，回调函数拿不到数据，此时的浏览器一直是锁住的状态，所以拿不到验证的结果，就触发不了下一步跳转到内部的页面，所以就是一直驻留在 登陆的界面
2）所以在结合submit 的情况下，就不可以使用 同步的 ajax 验证
3） 可能结合 输入用户名的 blur（） 【失去焦点的触发方法，利用用户输入 密码的时间 进行验证，只能说是大概率是可以的】
所以，最好改成异步的验证，这样灵活

ajax验证的用户名的示例

ajax验证的用户名的示例

天珩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
12-08
这里有一个输入框`<input id="txtName" type="text">`用于用户输入用户名，以及一个按钮`查看用户名是否存在" id="btn" onclick="JudgeUserName();">`，当点击该按钮时会触发`JudgeUserName()`函数。此外，还有一个`...
Ajax验证用户名是否存在的实例代码
10-17
主要介绍了Ajax验证用户名是否存在的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
ajax实现用户登录校验和注册校验用户名是否存在
qq_39095899的博客
05-18 2749
案例一：实现用户登录用ajax校验 如果是使用ajax异步提交表单，action属性可以不写，或者值为空 需求： 登录时用ajax判断名字和密码是否出错，如果出错并给出提示。出错的状况有： 没有输入用户名和密码 用户名密码错误 用户不存在 在项目中创建一个login.jsp代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE
使用Ajax实现用户名密码错误提示
从简的博客
12-23 2555
一般使用ajax的时候主要用到三个部分 ， url，data，success； url用来指定发送参数的具体路径，data则是要发送的参数，success则是请求成功完成时运行的函数，如下： url:"${pageContext.request.contextPath}/ajax/a3.do", 发送的路径为当前路径下ajax/a3.do ...
jQuery 调用Ajax技术判断用户名和密码输入是否正确
打酱油的程序员
08-19 5524
昨天做了一个原生的Ajax判断用户名和密码输入正确，今天在昨天的基础上做一个用jQuery 调用Ajax技术判断用户名和密码输入是否正确的案例！ 首先，将jquery-xxx.min.js 引用到jsp中，没有的可以去网上找一个 ！ xxx为版本 一、jsp页面 <%@ page language="java" contentType="text/html; charset=U...
Ajax实现登录异步检测用户名或者密码是否正确
Rk的博客
10-05 1808
Controller @RestController//加上这个不会返回到视图解析器 public class AjaxController { @RequestMapping("/a3") public String a3(String name,String pwd){ String msg=""; if(name!=null) { if("rk".equals(name)) { m
登录页面判断是否输入用户名和密码，并使用ajax方式登录
UserGuan的博客
08-07 9502
准备函数 // 这是下面的简写；jQuery dom 页面加载完毕后执行，可执行多次 $(function() { }) // 这是上面的全写；js 页面加载完毕后才执行，只能执行一次 $(document).ready(function() { }) 判断是否输入用户名和密码 使用ajax方式登录 后台servlet判断 lo...
asp.net结合Ajax验证用户名是否存在的代码
10-29
ASP.NET 结合 AJAX 验证用户名是否存在的代码主要涉及到客户端 JavaScript 与服务器端 ASP.NET 的交互，用于实现实时验证用户在输入框中输入的用户名是否已经被占用。下面将详细介绍这个过程。 首先，AJAX...
基于jQuery实现Ajax验证用户名是否存在实例
10-22
主要为大家详细介绍了基于jQuery实现Ajax验证用户名是否存在实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html ajax验证用户名密码,AJAX+ASP无刷新验证用户密码是否正确匹配并登录
weixin_42511098的博客
06-03 155
/p>Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">xmlns="http://www.w3.org/1999/xhtml">content="text/html; charset=utf-8" />精博图文#top-1{position: fixed;top: 0;le...
Ajax验证用户名或昵称是否已被注册
12-29
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力 。而用户名或昵称的验证就可以使XMLHttpRequest对象实现。下面是个小例子。 页面： 简单的输入框 <body> 昵称：<input type=text name=username >请输入昵称 密码：<input type=password name=password> </body> JS代码如下： [removed]=function() { var nameEl
利用Ajax实现无刷新验证用户名和密码是否正确
09-15
利用Ajax实现无刷新验证用户名和密码是否正确，其中是通小图片来显示结果的。
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
12-18
今天分享一个“利用Ajax技术来检测用户名是否存在”的例子。 利用Ajax技术来检测用户名是否存在的原理流程图： 最终结果截图：  复制代码 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/h
学习路之ajax--Ajax第一次登录错误，第二次登录成功问题
Green
12-01 586
第一次登录错误，第二次登录成功 解决方法： <form class="layui-form login-bottom" action="javascript:;">
java ajax登录界面代码_javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断...
weixin_30788829的博客
02-16 223
package com.servelt;import java.io.IOException;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;impor...
jQuery用ajax验证登录帐号密码
zyjtoto的博客
09-29 3697
后端代码；只返回 json单字符串数据 @RequestMapping("/a2") @ResponseBody public String fixLogin(String username,String password) { Map<String, Object> map = new HashMap<>(); Str...
用户名密码校验错误提示
weixin_56800842的博客
05-20 570
效果： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/js/jquery-2.0.0.min.js"></script> &l.
[AJAX]验证用户名和密码是否正确
xx_ii
08-03 1732
实现效果： 前端代码 login.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></scr
登录页面登录名和密码错误提示解决方案
热门推荐
June的专栏
07-15 5万+
登录页面需要做到登录名和密码错误的提示，效果如下图示所示：          需要在form提交的地方写下onsubmit="return loginCheck();" ，onsubmit是再提交之前进行的方法，你可以在这个方法里写逻辑校验，如果不符合要求，返回 false，form就不会提交。代码如下： " method="post" id="login_form" onsubmi
使用Ajax验证用户名是否存在
最新发布
06-02
好的，您可以通过以下步骤实现： 1. 在前端页面中，添加一个文本框用于输入用户名，并添加一个按钮用于触发验证用户是否存在的操作。 2. 在按钮的点击事件中，使用Ajax向后端发送请求，以验证用户名是否存在。 3. 后端接收到请求后，查询数据库中是否存在该用户名，如果存在，则返回一个存在的标识；否则返回一个不存在的标识。 4. 前端通过接收到的标识来判断用户名是否存在，并进行相应的操作，如提示用户或者允许用户进行下一步操作。 下面是一个使用jQuery实现的示例代码： ```javascript // 前端代码 $('#check_username_btn').click(function() { var username = $('#username_input').val(); $.ajax({ url: '/check_username', type: 'POST', data: {username: username}, success: function(data) { if (data.exist) { alert('该用户名已被占用！'); } else { alert('该用户名可以使用！'); } }, error: function() { alert('请求失败！'); } }); }); // 后端代码 from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/check_username', methods=['POST']) def check_username(): username = request.form.get('username') # 查询数据库中是否存在该用户名 exist = db.query('SELECT * FROM users WHERE username=%s', [username]) return jsonify({'exist': exist}) if __name__ == '__main__': app.run() ``` 在上述代码中，我们使用了jQuery的ajax方法向后端发送POST请求，请求的数据包括用户名。后端接收到请求后，查询数据库中是否存在该用户名，如果存在，则返回一个存在的标识；否则返回一个不存在的标识。前端通过接收到的标识来判断用户名是否存在，并进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值