文档章节

ajax检查用户名重复

o
 osc_g8254g7s
发布于 2019/08/20 13:25
字数 693
阅读 0
收藏 0
xhr

「深度学习福利」大神带你进阶工程师,立即查看>>>

1.获取ajax对象

  new XMLHttpRequest();

  IE6-8: new ActiveXOject("Microsoft.XMLHTTP");

  兼容判断:if(XMLHttpRequest){...}else{...}

2.打开链接:open()

  open(method,url,async):method:请求方式GET/POST,url:请求地址,async:true(异步,默认)/false(同步)

3.发送请求:send()

  如果是POST请求,send方法要带参,带上我们要传输的数据。

  POST请求的话,还要修改请求头,写在open方法后:setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.监听状态变化

  onreadystatechange = function(){...}

5.状态判断:readyState==4&&status==200

  readyState:4/3/2/1/0

    0:请求未初始化,open()方法未执行
              1:send()方法未调用
              2:send()方法已经被调用,响应头已经获取,响应头的状态已经返回
              3:部分responseText已经获取
              4:整个请求过程完成

  status:200/404/500

6.responseText:获得字符串形式的响应数据

   responseXML:获得 XML 形式的响应数据

注意:1.后端不做跳转,直接返回数据  2.返回的数据类型肯定是字符串  3.使用print,不要使用println(会有换行)  4.有的浏览器会有缓存问题

如何解决浏览器缓存问题:传输的参数加上时间戳 url=“/ajax/checkUser?username=”+username+"&_timer="+new Date().getTime();

   _timer:该参数名只要保证不与其他参数名重复即可

代码演示:检查用户名是否重复

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>检查用户名是否重复</title>
 7     </head>
 8 
 9     <body>
10         用户名:<input type="text" name="username" id="username" />
11         <br />
12         <span id="info"></span><br />
13         <button type="button" id="checkUser" onclick="checkUser()">校验</button>
14         <!--用ajax完成post请求时,
15             1.button的类型不能是submit,
16                 submit会有一个浏览器默认事件(即提交后会自动刷新页面)
17             2.请求头的Content-Type要改变,写在open之后
18                 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
19             3.send(要传输的数据写在这里)
20          -->
21     </body>
22     <script type="text/javascript">
23         function checkUser() {
24             //获取数据
25             var username = document.getElementById("username").value;
26             alert(username);
27             //1.获取ajax对象
28             var xhr = null;
29             if(XMLHttpRequest) {
30                 xhr = new XMLHttpRequest();
31             } else if(ActiveXObject) {
32                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
33             } else {
34                 alert("你是啥???");
35             }
36             //2.open                  带参数传输
37             xhr.open("GET", "/ajax/checkUser?username="+username, true);
38             //3.send
39             xhr.send();
40             //4.监听状态
41             xhr.onreadystatechange = function() {
42                 if(xhr.status == 200 && xhr.readyState == 4) {
43                     if(xhr.responseText == "false") {
44                         document.getElementById("info").innerHTML="用户名已存在!!";
45                     } else {
46                         document.getElementById("info").innerHTML="用户名可以使用!!";
47                     }
48                 } else {
49                     console.debug("error");
50                 }
51             }
52         }
53     </script>
54 
55 </html>
前端代码
 1 @WebServlet("/checkUser")
 2 public class checkUserServlet extends HttpServlet {
 3     private static final long serialVersionUID = 1L;
 4     @Override
 5     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 6         String username = request.getParameter("username");
 7         System.out.println(username);
 8         if("admin".equals(username)) {
 9             System.out.println("判断结果为true");
10             response.getWriter().print("false");//不用加ln,会出错
11         }else {
12             response.getWriter().print("true");
13         }
14     }
15 }
后端代码

 

o
粉丝 0
博文 499
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
8
JavaScript 服务器页--JSSP

JSSP (JavaScript Server Pages) 可以让你在 Java 的应用服务器上使用 JavaScript 生成网页。支持已有的 Java 包和嵌入式 SQL 命令。包含 Dervish 这个 JavaScript 交互操作包用于简化 Ajax...

匿名
2013/02/11
3.8K
0
iOS 应用版本更新检查--Harpy

实现 app 版本检查功能。用户打开app之后,进行app的版本更新检查。如果检查到 appstore 上有当前qpp的新版本,则弹出对话框提醒用户下载。可以设置让用户选择下载或者强制用户下载。 [Code4...

匿名
2013/02/18
1.8K
0
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
7K
2
Ajax 文件上传组件--fineuploader

Fine Uploader 是一个采用Ajax技术实现的文件上传组件,支持拖拽文件上传。使用很简便,只需在页面中引入相应的CSS+JavaScript,剩下的就只服务器端处理逻辑。在其提供的下载包中已经有多种语...

匿名
2012/10/27
1.5W
2

没有更多内容

加载失败,请刷新页面

加载更多

没有指定分支的“git push”的默认行为 - Default behavior of “git push” without a branch specified

问题: I use the following command to push to my remote branch: 我使用以下命令推送到我的远程分支: git push origin sandbox If I say 如果我说 git push origin does that push ch......

技术盛宴
53分钟前
21
0
为什么在允许某些Unicode字符的注释中执行Java代码?

问题: The following code produces the output "Hello World!" 以下代码生成输出“Hello World!” (no really, try it). (不,真的,试试吧)。 public static void main(String... args......

富含淀粉
今天
18
0
字符串格式:%与.format - String formatting: % vs. .format

问题: Python 2.6 introduced the str.format() method with a slightly different syntax from the existing % operator. Python 2.6引入了str.format()方法,其语法与现有的%运算符略有不......

javail
今天
22
0
什么是按位移位(位移)运算符以及它们如何工作? - What are bitwise shift (bit-shift) operators and how do they work?

问题: I've been attempting to learn C in my spare time, and other languages (C#, Java, etc.) have the same concept (and often the same operators) ... 我一直在尝试在业余时间学习......

法国红酒甜
今天
32
0
OSChina 周二乱弹 —— 卧槽 李荣浩的契约兽啊

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《红色的回忆》- 痛仰乐队 手机党少年们想听歌,请使劲儿戳(这里) 动弹, 又好多...

小小编辑
今天
75
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部