AJAX使用前端校验用户名是否已被使用------AJAX

已于 2023-11-14 22:15:46 修改
阅读量92 收藏
点赞数 1
分类专栏： AJAX 前端 计算机网络 文章标签： ajax javascript java-ee java tomcat servlet 前端
于 2023-11-13 23:45:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134389180
版权
前端 同时被 3 个专栏收录
350 篇文章 2 订阅
订阅专栏
计算机网络
134 篇文章 0 订阅
订阅专栏
AJAX
45 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en" id="myHtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HtmlAll</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function()
    {
        document.getElementById("username").onblur = function()
        {
            var value = document.getElementById("username").value;
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function()
            {
                if(ajax.readyState === 4)
                {
                    if(ajax.status === 200)
                    {
                        if(ajax.responseText === "该用户名已被使用")
                        {
                            document.getElementById("usernameError").innerHTML = ajax.responseText;
                        }
                        else
                        {
                            document.getElementById("usernameError").innerHTML = "可用该用户名";
                        }
                    }
                    else
                    {
                        alert(ajax.status);
                    }
                }
            }
            ajax.open("POST","/ajax/ajaxRequestTest",true);
            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            ajax.send("username=" + value);
        }
    }
</script>
<table align="center">
    <form>
        <tr align="center">
            <th>用户名</th>
            <th><input type="text" name="username" id="username"/></th>
            <th id="usernameError" style="color: red;"></th>
        </tr>
        <tr align="center">
            <th>邮箱</th>
            <th><input type="email" name="username" id="email"/></th>
        </tr>
        <tr align="center">
            <th>密码</th>
            <th><input type="password" name="username" id="password1"/></th>
        </tr>
        <tr align="center">
            <th>确认密码</th>
            <th><input type="password" name="username" id="password2"/></th>
        </tr>
        <tr>
            <th>登录或重置</th>
            <th>
                <input type="submit" name="submit" id="登录"/>
                <input type="reset" name="reset" id="重置"/>
            </th>
        </tr>
    </form>
</table>
<div id="myDiv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en" id="myHtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HtmlAll</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function()
    {
        document.getElementById("username").onblur = function()
        {
            var value = document.getElementById("username").value;
            var ajax = new XMLHttpRequest();
            ajax.onreadystatechange = function()
            {
                if(ajax.readyState === 4)
                {
                    if(ajax.status === 200)
                    {
                        if(ajax.responseText === "该用户名已被使用")
                        {
                            document.getElementById("usernameError").innerHTML = ajax.responseText;
                        }
                        else
                        {
                            document.getElementById("usernameError").innerHTML = "可用该用户名";
                        }
                    }
                    else
                    {
                        alert(ajax.status);
                    }
                }
            }
            ajax.open("POST","/ajax/ajaxRequestTest",true);
            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            ajax.send("username=" + value);
        }
    }
</script>
<table align="center">
    <form>
        <tr align="center">
            <th>用户名</th>
            <th><input type="text" name="username" id="username"/></th>
            <th id="usernameError" style="color: red;"></th>
        </tr>
        <tr align="center">
            <th>邮箱</th>
            <th><input type="email" name="username" id="email"/></th>
        </tr>
        <tr align="center">
            <th>密码</th>
            <th><input type="password" name="username" id="password1"/></th>
        </tr>
        <tr align="center">
            <th>确认密码</th>
            <th><input type="password" name="username" id="password2"/></th>
        </tr>
        <tr>
            <th>登录或重置</th>
            <th>
                <input type="submit" name="submit" id="登录"/>
                <input type="reset" name="reset" id="重置"/>
            </th>
        </tr>
    </form>
</table>
<div id="myDiv"></div>
</body>
</html>
ajax设置async校验用户名是否存在的实现方法
12-01
本篇文章主要探讨如何使用Ajax技术来校验用户名（这里以手机号码为例）是否已存在，以此防止数据冲突。在JavaScript中，Ajax是一种无刷新、异步更新页面的技术，它允许我们在不重新加载整个页面的情况下与服务器交换...
Ajax 异步请求-校验用户名唯一性
11-08
本文将深入探讨如何在MVC架构的项目中，利用Ajax实现异步请求来校验用户名的唯一性。 首先，让我们了解MVC（Model-View-Controller）模式。这是一个设计模式，常用于构建可维护性和可扩展性强的Web应用。Model代表...
javaWeb中注册页面使用(Axios)ajax判断输入的账号是否已经存在
楠小弟的博客
03-13 390
javaWeb中注册页面使用ajax发送请求
Ajax判断用户名是否存在
qq_62078665的博客
05-07 883
使用 Ajax在未提交表单时检测该用户名是否存在于数据库
使用Ajax校验用户名是否存在 -- 实例
Bi-Hu的博客
05-31 262
这里我们先使用js原生操作ajax的方式，先感受一下，在新版的js中提供了更便捷的操作方式，我们后面再介绍。通常情况下在一个系统中的用户的登录名是唯一的，为了保证用户名的唯一性，需要在用户注册时添加校验，即根据用户输入的用户名去数据库中查找，这里使用ajax校验用户名可以很好的提升用户体验，用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一，然后根据结果给用户相应的提示信息，这样对...
javaweb基础----使用ajax校验用户名是否重复
weixin_30622107的博客
03-24 318
首先是前端js的代码： 1 <script type="text/javascript"> 2 function checkForm(){ 3 //1.验证用户名不能为空 4 var userName = document.getElementById("userName").value; 5 ...
JavaWeb22.4【Ajax&Json：注册案例-校验用户名是否已存在】
yubaby
07-08 295
客户端 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户注册</title> 6 <script src="js/jquery-3.3.1.min.js"...
ajax--json技术--校验用户名是否存在
刘向阳的博客
09-23 155
校验用户名是否存在 前端regist.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <script src="js/jquery-3.3.1.js"></script> <script> //在页面加载完成后
jquery+ajax前后端交互验证用户名是否唯一
reasonable_LX的博客
02-15 623
jquery+ajax前后端交互实现验证用户名唯一性
【入门学习-用Servlet和Ajax技术,校验用户名是否存在】
qq_43048507的博客
12-04 1299
当文本框失去焦点后，触发post请求，把文本框里的内容传到服务器，服务器进行校验，将结果返回给前端页面。没有用数据库的知识，username的值直接随便在servlet里定义了一个，就是作为一个新手熟悉前后端数据交互。
AJAX-异步请求实现校验用户名是否存在
William_GJIN的博客
03-23 2084
个人博客 在用户注册时常有验证用户名是否存在的功能，依靠异步请求刷新部分页面来实现。需要用到JQUery，以及 json 和 JAVA 对象的转换。 前端页面编写 焦点离开用户名框后，会自动提交输入框内容到服务器，发送 ajax 请求，解析服务器返回 json 如果 userExsit 为true，则显示用户名已存在，为 false 则显示用户名可用。 <!DOCTYPE html>...
使用struts2+Ajax+jquery验证用户名是否已被注册
10-22
本文介绍了一个使用Struts2框架结合Ajax和jQuery技术来验证用户名是否已被注册的实践案例。其中，我们涉及到的技术点主要有Struts2的使用、Ajax通信机制以及jQuery库在前端处理中的应用。以下是对文档提及知识点的...
使用AJAX完成用户名是否存在异步校验
10-20
在本话题中，我们要讨论的是如何使用AJAX来完成用户名的异步校验。这是一个常见的网络应用场景，用于在用户注册或登录时检查用户名是否已被占用。异步校验可以提供更好的用户体验，因为它允许在用户填写信息的同时...
AJAX 全面教程：从基础到高级
孤客科技
11-07 884
AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行异步通信。AJAX 的核心在于 JavaScript 和 XMLHttpRequest 对象的使用，虽然现在 JSON 逐渐取代了 XML，但 AJAX 的概念依然适用。AJAX 是现代网页开发中不可或缺的技术，通过异步请求提升用户体验和网页性能。
SparkSql读取数据的方式
weixin_64860388的博客
11-05 705
此处的pyspark更像是一个客户端，里面可以通过python编写spark代码而已。而我们以前安装的pyspark更像是spark的python运行环境。不要在一个python 文件中，创建两个不同的sparkSession对象，否则对于sparksql获取hive的元数据，有影响。第二种情况：linux环境下，按照如下方式进行。方式二：直接调用对应数据源类型的方法。方式一：给定读取数据源的类型和地址。1）集群环境操作hive。
【Ajax】跨域
weixin_45980065的博客
11-06 857
CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。//这里因为是满足同源策略的, 所以 url 可以简写。//3. 将 script 插入到文档中。//1. 创建 script 标签。//2. 设置标签的 src 属性。//获取 result 元素。//修改 p 标签的提示文本。//获取 input 元素。违背同源策略就是跨域。
前端学习笔记-Ajax篇
Yvonne_hjj的博客
11-07 785
AAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。无刷新获取数据。AAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML中都是预定义标签，而XML中没有预定义标签全都是自定义标签，用来表示一些数据。比如说有一个学生数据:name="孙悟空";age=18;gender="男";
ajax关于axios库的运用小案例
wozhaonue_w的博客
11-07 804
1.bootstrap弹窗来实现新增和编辑图书时出现的弹窗有两种方案：a.可以用自带的属性来进行弹窗的显示和隐藏b.可以通过JS进行控制，此操作可以进行自定义，比如在隐藏窗口的同时获取表单元素，并进行渲染页面a方案在想要进行隐藏和显示的按钮中增加自带的属性b方案2.渲染列表a.获取数据b.渲染数据。
Echarts 折线图
最新发布
weixin_44443380的博客
11-08 251
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
AJAX技术入门讲解 - 王兴魁传智播客教程
以用户名校验为例，传统Web应用会提交整个表单到服务器，而AJAX则仅发送用户名，服务器返回结果后，前端通过JavaScript处理反馈，用户界面立即给出响应。 **AJAX的技术核心** - **XMLHttpRequest对象**：这是AJAX的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值