ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）

一、总结

1、ajax可以实现我们常见的注册用户名动态判断

2、jquery里面的ajax也是类似我们这样封装了的函数

二、ajax实现注册用户名时动态显示用户名是否已经被注册

练习：判断用户名是否存在

  • 实例描述：

    判断用户名是否存在，并进行相应的提示。

  • 案例要点：

    JSON数据的加载和解析；
    将用户的注册名和加载的JSON文件进行比较，判断用户名是否已经存在。

三、代码

html代码

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6   <script type="text/javascript" src="ajax1.js"></script>
 7   <style type="text/css">
 8   #sp{ 9       color: orange;
10     }
11   </style>
12 </head>
13 <body>
14   <form action="#" id="form1" method="get">
15     <p>用户名：<input type="text" id="username" name="username"><span id="sp"></span></p>
16     <p>密&nbsp&nbsp码：<input type="password" id="password" name="password"></p>
17     <input type="button" value="提交" onclick="checkName()">
18   </form>
19   <script>
20       function checkName(){
21         var username=document.getElementById('username').value;
22         var sp=document.getElementById('sp')
23         var boo=false;
24         ajax('names.json',function(str){
25           // alert(typeof str)
26           var nameArr=JSON.parse(str)
27           // alert(typeof nameArr)
28           for(var i=0;i<nameArr.length;i++){
29             if (nameArr[i]==username) {
30               // alert('用户名已经存在')
31              boo=true;
32             }//else{33               //alert('用户名可以使用')
34             //}
35           }
36           if (boo) {
37             sp.innerHTML='您来晚了，这个用户名已经存在,请再换一个'
38             // alert('用户名已经存在')
39           }else{
40             // alert('用户名可以使用')
41             sp.innerHTML='恭喜您，这个用户名可以使用'
42           }
43         })
44       }
45   </script>
46 </body>
47 </html>

js的ajax函数封装：ajax1.js

 1 function ajax(url,funSucc,fnFaild){
 2
 3
 4     var xhr=new XMLHttpRequest();
 5
 6     url=url+'?'+new Date().getTime();
 7
 8     xhr.open('GET',url,true);
 9
10     xhr.send();
11
12     xhr.onreadystatechange=function(){
13
14         if (xhr.readyState==4) {
15
16             if (xhr.status==200) {
17
18                 funSucc(xhr.responseText)
19
20
21             }else{
22                 if (fnFaild){
23                      fnFaild(xhr.statusText)
24                 }
25
26             }
27         }
28     }
29
30 }

数据：names.json

["张三","李四","王五"]

转载于:https://www.cnblogs.com/Renyi-Fan/p/9070139.html

ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）...相关推荐

  1. m_Orchestrate learning system---二十四、thinkphp里面的ajax如何使用

    m_Orchestrate learning system---二十四.thinkphp里面的ajax如何使用 一.总结 一句话总结:其实ajax非常简单:前台要做的事情就是发送ajax请求过来,后台 ...

  2. jQuery里如何使用ajax发送请求

    回到文章总目录 本篇文章介绍的是在jQuery里如何使用ajax发送请求 jquery里面的单纯的get请求和单纯的post请求比较简洁的,也比较简易 jquery里面ajax通用方法(自定义个化强) ...

  3. jquery中ajax中的参数,jquery中的ajax参数

    jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...

  4. Jquery中的AJax技术结合PHP实现无刷新验证验证码

    Jquery中的Ajax在页面无刷新情况下实现验证码的验证 ①准备好的html文件,代码如下 <!DOCTYPE html> <html> <head><ti ...

  5. ajax自动局部刷新,jQuery如何实现AJAX定时刷新局部页面

    jQuery如何实现AJAX定时刷新局部页面 发布时间:2021-06-25 09:47:48 来源:亿速云 阅读:75 作者:小新 这篇文章主要介绍了jQuery如何实现AJAX定时刷新局部页面,具 ...

  6. jQuery的Ajax方法实现注册邮箱时用户名查询

    利用jQuery实现邮箱注册时的重复用户名查询 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可 ...

  7. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  8. 给Mac安装Win7，安装时在选择语言和最后一部输入用户名时鼠标键盘失灵的方法

    1:问题 错误信息: 最近的硬件或软件更改了可能安装了未正确签名或损坏的文件,或者可能是来自未知源的恶意软件 状态:0x0000428 信息:Windows无法验证此文件的数字签名 给Mac安装Win ...

  9. jquery中的ajax请求的基本使用以及登陆注册不刷新页面的例子/jquery中get、post以及ajax的使用/运用jQuery实现登陆注册案例

    1.登陆注册案例: index.html代码: <!DOCTYPE html> <html lang="en"> <head><meta ...

最新文章

  1. java代码例子_Java与C++两大语言比较
  2. DeepMind发布最新原始音频波形深度生成模型WaveNet，将为TTS带来无数可能
  3. windows系统登陆就注销如何解决,系统登陆就注销的解决办法
  4. mysql 文件组织_数据库如何组织数据？
  5. 该内存不能为read
  6. 苹果计算机磁盘格式,Mac 上“磁盘工具”中可用的文件系统格式
  7. 瑞士加密银行SEBA将发行B轮融资股票作为证券代币
  8. 读《JavaScript权威指南》笔记（三）--对象
  9. 利用ASPJPEG组件生成中文验证码
  10. [Pku 2777] 线段树(六) {总结}
  11. 机器视觉软件开发入门（1）
  12. 项目意义、必要性分析及需求分析的区别
  13. 容器云系列之Docker容器监控cAdvisor
  14. linux ls命令ls /dev | grep sda 什么意思(以及grep连接符|怎么用)
  15. 鞠今日截语2014.05.11火星合月
  16. java毕业设计老师评语_java教学评价管理系统毕业设计答辩PPT.ppt
  17. 泛函分析笔记7：弱收敛与弱星收敛
  18. 分享国内常用的免费MD5在线解密网站，这5个网站很实用
  19. 有没有一款桌面便签软件,可以手机电脑都能使用的?
  20. 软件智能：aaas系统中AI的任务能力和工作

热门文章

  1. 苹果电脑IOS ssh远程关机
  2. 纸张折叠多少次能够和珠穆朗玛峰峰一样高
  3. 关于微新分享PC微信端成功，手机微信失败
  4. 优惠券使用---责任链模式
  5. Java选择题（十）
  6. ctfshow每周挑战-极限命令执行
  7. 中文论文撰写技巧（word）——参考文献的交叉引用
  8. 解决迅雷下载外网文件速度为0
  9. 陈艾盐：《春燕》百集访谈节目第六十九集
  10. 第一台计算机作文,精选电脑三年级作文6篇