Ajax验证用户名体验

最新推荐文章于 2022-03-07 09:57:27 发布
最新推荐文章于 2022-03-07 09:57:27 发布
阅读量63 收藏
点赞数
分类专栏： AJax 文章标签： Ajax验证用户名体验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yearingforthefuture/article/details/116741713
版权

Ajax验证用户名体验

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        function nameFun() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"name": $("#name").val()},
                success: function (data) {
                    //console.log(data);
                    if (data.toString() === "用户名成功") {//后端返回对应的信息进行比对
                        $("#userInfo").css("color", "green");
                    } else {
                        $("#userInfo").css("color", "red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }

        function passwordFun() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"password": $("#password").val()},
                success: function (data) {
                    if (data.toString() === "密码正确") {
                        $("#userPasswordInfo").css("color", "green");
                    }else {
                        $("#userPasswordInfo").css("color", "red");
                    }
                    $("#userPasswordInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" onclick="nameFun()">
    <%--span提示信息--%>
    <span id="userInfo"></span>
</p>
<p>
    用户密码:<input type="password" id="password" onclick="passwordFun()">
    <span id="userPasswordInfo"></span>
</p>
</body>
</html>

内容参考：https://www.bilibili.com/video/BV1aE41167Tu
仅用于学习！

Java追求者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
10-28
本文将详细解析基于jQuery实现的Ajax验证用户名是否存在的技术细节。 首先，让我们来看一下前端部分。在HTML代码中，我们有一个文本输入框用于用户输入用户名（`<input id="txtName" type="text" />`），以及一个...
ajax验证用户名是否重复
05-18
在Ajax验证用户名的场景中，jQuery可以用于更简单、更优雅地处理DOM操作和Ajax请求。例如，可以使用`$.ajax()`方法创建Ajax请求，设置请求类型、URL、数据以及成功的回调函数。以下是一个简单的示例： ```...
SpringMVC--Ajax验证用户名体验
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-10 308
1. SpringMVC–Ajax验证用户名体验 思考一下我们平时注册时候，输入框后面的实时提示怎么做到的；如何优化 1.1 我们写一个Controller AjaxController.java package com.tian.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;
SpringMVC(22) —— Ajax验证用户名体验
Jzandth的博客
09-22 193
目录1.需求2.代码实现3.测试 1.需求 2.代码实现 controller @RequestMapping("/t3") public String test03(String name,String pwd){ System.out.println("test03==>"); String msg = ""; if (name!=null){ if ("admin".equals(name)){
ajax 用户验证js,js ajax验证用户名
weixin_31232695的博客
08-05 275
回答jQuery的ajax 验证用户名的例子/验证用户名 js 方法 uname:输入的用户名 function ajax_check_uname(uname){ var url='/check/uname.php';这里是你的php post(url,{uname:uname},function(data){ if('success'=data)...小旋风柴进2019-12-02 02:17:...
使用ajax验证用户名重复
祁连山
04-01 1123
继上次的用户注册登录案例之后，对其中的部分功能再做进一步改进。上一版中用户提交表单后才对用户名进行校验，虽然做了回显，但还是感觉功能弱了些。为了能有更好用户体验，不是在用户提交表单后才给提示，而是在用户输入用户名后就立即对该用户名进行数据库校验，经过晚上的测试现在可以使用纯js版和jquery版。　　准备工作，先编写好验证用户名重复的后台Servlet程序，然后在jsp或html中使用js对用户名
php使用ajax验证用户名重名,ajax+php验证用户名重复代码实例_PHP教程
weixin_35944650的博客
03-12 162
本教程是一款利用了ajax php在用户输入完用户名后，就会发送请求给php程序，然后查询数据，判断用户要注册的用户名是不是己经注册或存在重复了，及时的返回提示信息，以免用户填写了一大填表单后，突然提供用户名不能注册己被注册了，这样体验就不好了。本教程就是专门解决这个问题了，能快速的告诉你要注册的用户名是否可以注册。ajax+php教程验证用户名重复代码实例/*本教程是一款利用了ajax php在...
ajax验证用户名是否存在 php,jquery ajax 检测用户注册时用户名是否存在
weixin_39776239的博客
03-13 117
当用户注册需要知道这个用户名是否被人使用所以需要在用户登陆前判断为了使用户得到更好的体验，我们使用了jquery的ajax效果，来用户名是否存在。首先需要一个添加年级的页面，暂时叫grade.htm这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件)。下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的。grade....
使用Ajax校验用户名是否存在
【chase
12-27 620
使用Ajax校验用户名 通常情况下在一个系统中的用户的登录名是唯一的，为了保证用户名的唯一性，需要在用户注册时添加校验，即根据用户输入的用户名去数据库中查找，这里使用ajax校验用户名可以很好的提升用户体验，用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一，然后根据结果给用户相应的提示信息，这样对于用户来说非常方便。 什么是回调函数 回调函数就是你编写好了一个函数，让软件系统来...
Ajax判断用户名是否可用
wyy的博客
05-08 263
实现步骤 给用户名文本框绑定onblur事件 开发服务器端判断用户的是否可用功能 使用Ajax完成功能 创建XMLHttpRequest对象 建立到服务器的连接 设置服务器在完成后要运行的回调函数 发送请求 代码实现 save.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <base href="<%=request.getCont
Ajax简单实现注册用户名校验
行行失故路
03-07 3363
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 作用：提升用户的体验
基于jQuery实现Ajax验证用户名是否可用实例
10-18
**基于jQuery实现Ajax验证用户名是否可用的实例详解** 在网页应用开发中，实时验证用户输入的数据，如用户名是否已存在，是一种常见的需求。Ajax技术能够实现异步数据交互，使得无需刷新页面就能获取服务器端的反馈...
Ajax验证用户名或昵称是否已被注册
08-30
总结来说，Ajax验证用户名或昵称是否已被注册涉及到前端JavaScript的事件处理、XMLHttpRequest对象的使用，以及后端服务器的响应。通过这种方式，我们可以提供更好的用户体验，让用户在输入时即时得到反馈，而无需...
ajax异步验证用户名是否存在
08-07
总结，实现"ajax异步验证用户名是否存在"涉及前端的JavaScript交互、AJAX请求的发起和响应处理，以及服务器端的数据库查询和响应构造。通过这种方式，我们可以为用户提供即时反馈，提升其使用体验。
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
最新发布
07-08
ROS安装配置与语法介绍文档、ROS代码文档、树莓派与ROS结合使用等相关文档
2003-2023年飞机航线信息数据.xlsx
07-08
2003-2023年飞机航线信息数据 1、时间：2003-2023年 2、来源：高铁航线数据库（Chinese High-speed Rail and Airline Database，CRAD） 3、指标：起点城市、起点城市所属地级市、起点城市所属省份、起点机场、终点城市、终点城市所属地级市、终点城市所属省份、终点机场、航空公司、更新日期、航班、出发时间、到达时间、准点率、班次_周一、班次_周二、班次_周三、班次_周四、班次_周五、班次_周六、班次_周日
Xilinx Vitis 2020工程源目录修改
07-08
Xilinx Vitis可以做standalone程序开发,不过其工程中使用的路径为绝对路径。工程更换位置后编译将会显示错误。例如：源目录为D:/work,复制到同事电脑上放到C:/work(同事电脑只有一个C盘)。利用Vitis打开工程编译会有一堆错误，提示文件找不到。本脚本用来解决该问题。
1000__gpt_4_prompts.md
07-08
1000__gpt_4_prompts
利用ajax验证用户名,3.6.2 利用Ajax验证注册用户名（1）
06-09
好的，我明白了你的问题。利用 Ajax 验证用户名可以提高用户体验，同时也能减少服务器负担。下面是一个简单的实现方法： 1. 在 HTML 页面中添加一个输入框和一个按钮，用于输入用户名和触发 Ajax 请求。 ```html <input type="text" id="username" placeholder="请输入用户名"> <button id="check-btn">检查用户名</button> ``` 2. 使用 jQuery 发送 Ajax 请求，检查用户名是否已经被注册。 ```javascript $(function() { $('#check-btn').click(function() { var username = $('#username').val(); // 发送 Ajax 请求 $.ajax({ url: '/check-username', type: 'POST', data: { username: username }, success: function(data) { if (data.result === 'ok') { alert('用户名可用'); } else { alert('用户名已被注册'); } } }); }); }); ``` 3. 在服务器端接收 Ajax 请求，并检查用户名是否已经被注册。 ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/check-username', methods=['POST']) def check_username(): username = request.form.get('username') # 检查用户名是否已经被注册 if username in ['张三', '李四', '王五']: result = 'error' else: result = 'ok' return jsonify({'result': result}) ``` 这就是利用 Ajax 验证用户名的基本实现方法。当用户输入用户名并点击按钮时，前端会发送 Ajax 请求到服务器端进行验证，服务器端会返回一个结果给前端，前端再根据结果进行相应的提示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值