13. Ajax验证用户名

最新推荐文章于 2023-07-20 16:55:55 发布
最新推荐文章于 2023-07-20 16:55:55 发布
阅读量70 收藏
点赞数
分类专栏： SpringMVC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53509974/article/details/118446933
版权

13. Ajax验证用户名

13.1 Controller

package com.liu.controller;
import com.liu.pojo.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;

@RestController
public class HelloController {
    @RequestMapping("/login")
    public String login(String name,String password){
        String msg = "";
        if (name != null) {
            if ("admin".equals(name)) {
                msg = "ok";
            } else {
                msg = "用户名有误";
            }
        }
        if (password != null) {
            if ("180018".equals(name)) {
                msg = "ok";
            } else {
                msg = "密码有误";
            }
        }
        return msg;
    }
}

13.2 jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        function a(){
            $.post({
                url : "${pageContext.request.contextPath}/login",
                data :  {"name":$('#name').val()},
                success : function (data) {
                    if (data.toString()==='ok') {//jQuery直接加入节点 ， 设置css与html
                        $('#userInfo').css({"color":"green"});  
                    } else {
                        $('#userInfo').css("color","red");
                    }
                    $('#userInfo').html(data);
                }
            })
        }
        function b(){
            $.post({
                url : "${pageContext.request.contextPath}/login",
                data :  {"password":$('#password').val()},
                success : function (data) {
                    if (data.toString()==='ok') {
                        $('#userInfo').css({"color":"green"});
                    } else {
                        $('#userInfo').css("color","red");
                    }
                    $('#userInfo').html(data);
                }
            })
        }
    </script>
</head>
<body>
<p>
    用户名 ： <input type="text" id="name" onblur="a()">
    <span id="userInfo"></span>
</p>
<p>
    密码  ： <input type="text" id="password" onblur="b()">
    <span id="passwordInfo"></span>
</p>
</body>
</html>
陆源东
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
12-08
这样就实现了在不刷新页面的情况下，实时验证用户名的功能。 总结起来，这个实例展示了如何利用jQuery的Ajax功能，结合简单的服务器端代码，实现用户名存在的实时验证，提升了用户体验。通过这个例子，我们可以学习...
ajax验证用户名和密码的实例代码
10-22
### AJAX验证用户名和密码知识点 #### 1. 创建XMLHttpRequest对象 在使用AJAX技术时，首先需要创建一个XMLHttpRequest对象，它是AJAX编程的核心。在现代浏览器中，可以通过以下代码创建XMLHttpRequest对象： ```...
异步请求之AJAX，实现简单的用户名输入检测
最新发布
07-20 1422
什么是异步请求 异步请求干什么的 异步请求有哪几种 AJAX使用： chuli 和 chuli() 的不同的。
Ajax简单实现注册用户名校验
行行失故路
03-07 3403
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 作用：提升用户的体验
Ajax验证用户名是否可用
悬在半空的博客
12-04 969
使用Ajax实现注册验证功能。
Ajax——判断用户名是否已经注册
kuaixiao0217的博客
05-07 2064
使用Ajax判断用户名是否已经注册
ajax 验证用户名是否已存在
程序人生
11-06 1万+
ajax验证用户名是否已存在ajax验证用户名是否已存在 ，一般选用的是同步请求，因为验证用户是否存在的同时， 一般还要验证用户名是否为空等表单验证。jsp页面以及ajax验证如下：&lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;UTF-8&quot;%&gt; &lt;% String path = req
Ajax验证用户名或昵称是否已被注册
08-30
总结来说，Ajax验证用户名或昵称是否已被注册涉及到前端JavaScript的事件处理、XMLHttpRequest对象的使用，以及后端服务器的响应。通过这种方式，我们可以提供更好的用户体验，让用户在输入时即时得到反馈，而无需...
ajax验证用户名是否存在 与 rapid validate 的使用
03-16
总结来说，Ajax是实现动态网页交互的关键技术，它在验证用户名是否可用的场景下提供了流畅的用户体验。而Rapid Validate这样的工具则帮助开发者保证代码质量，防止潜在的错误。结合两者，我们可以创建既高效又健壮的...
基于jQuery实现Ajax验证用户名是否可用实例
10-18
**基于jQuery实现Ajax验证用户名是否可用的实例详解** 在网页应用开发中，实时验证用户输入的数据，如用户名是否已存在，是一种常见的需求。Ajax技术能够实现异步数据交互，使得无需刷新页面就能获取服务器端的反馈...
AJAX实现注册时的用户名验证
qq_42613859的博客
07-05 4396
1.  register.jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName(...
ajax使用之验证用户名是否存在
热门推荐
花2不谢
06-14 2万+
ajax使用非常广，比如验证用户名、二级联动等。实现的效果如下： 前台代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> ajax用户名验证 window.onload = function() { document.get
JavaScript(7) Ajax验证用户名案例
郑清
11-04 1598
前台页面： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l...
Ajax异步校验用户名是否存在
sunaxp的博客
07-13 4705
1客户端：&lt;input type="text" class="form-control" id="username" placeholder="请输入用户名"&gt;&lt;input type="password" class="form-control" id="inputPassword3" placeholder="请输入
Java+Ajax实现用户名重复检验
HuangQinJian
05-02 1万+
今天，我来教大家怎么实现Java+Ajax实现用户名重复检验。
ajax与servlet--验证用户名是否存在
jsh458046505的博客
12-04 1万+
验证用户名是否存在--使用jQuery 一、数据库mysql               数据库中已经存在用户名。 二、html页面      用户登录 username 请输入昵称
使用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、付费专栏及课程。

余额充值