ajax检查用户名重复
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:该参数名只要保证不与其他参数名重复即可
代码演示：原生JS方式检查用户名是否重复
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>检查用户名是否重复</title>
</head> <body>
用户名：<input type="text" name="username" id="username" />
<br />
<span id="info"></span><br />
<button type="button" id="checkUser" onclick="checkUser()">校验</button>
<!--用ajax完成post请求时,
1.button的类型不能是submit,
submit会有一个浏览器默认事件(即提交后会自动刷新页面)
2.请求头的Content-Type要改变,写在open之后
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3.send(要传输的数据写在这里)
-->
</body>
<script type="text/javascript">
function checkUser() {
//获取数据
var username = document.getElementById("username").value;
alert(username);
//1.获取ajax对象
var xhr = null;
if(XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if(ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("你是啥？？?");
}
//2.open 带参数传输
xhr.open("GET", "/ajax/checkUser?username="+username, true);
//3.send
xhr.send();
//4.监听状态
xhr.onreadystatechange = function() {
if(xhr.status == 200 && xhr.readyState == 4) {
if(xhr.responseText == "false") {
document.getElementById("info").innerHTML="用户名已存在！！";
} else {
document.getElementById("info").innerHTML="用户名可以使用！！";
}
} else {
console.debug("error");
}
}
}
</script> </html>
前端代码
@WebServlet("/checkUser")
public class checkUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
System.out.println(username);
if("admin".equals(username)) {
System.out.println("判断结果为true");
response.getWriter().print("false");//不用加ln,会出错
}else {
response.getWriter().print("true");
}
}
}
后端代码
ajax检查用户名重复的更多相关文章
- asp.net ajax检查用户名是否存在代码
原文 asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web ...
- 使用原生Ajax进行用户名重复的检验
title: 使用原生Ajax进行用户名重复的检验(一) date: 2019-01-21 17:35:15 tags: [JavaScript,Ajax] --- Ajax的复习 距离刚开始学aja ...
- 使用ajax验证用户名重复
继上次的用户注册登录案例之后,对其中的部分功能再做进一步改进.上一版中用户提交表单后才对用户名进行校验,虽然做了回显,但还是感觉功能弱了些.为了能有更好用户体验,不是在用户提交表单后才给提示,而是在用 ...
- ajax检查用户名是否存在
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...
- SSH+Ajax实现用户名重复检查（二）
1.另外一种更常用的js表达方式: var user = { inintEvent: function(){ $("input[name='user.User_LogName']" ...
- SSH+Ajax实现用户名重复检查（一）
1.struts.xml设置 <package name="default" namespace="/" extends="json-defau ...
- ajax检查用户名
Ajax实现的效果 究竟Ajax能实现什么功能呢?今天下午学习了一下Ajax,现在跟大家分享一下我的学习心得.Ajax是什么?工作机制又是什么?可能不大准确,只是我个人看了视频学习后的一点点看法. A ...
- AJAX异步检查，检查用户名是否存在
AJAX异步检查,检查用户名是否存在 写法一: var xmlHttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, ...
- vue检查用户名是否重复
前端函数如下,js方法代码无需更改,前端代码逻辑在components\common\lab_header.vue 只需要修改components\axios_api\http.js中调用的后端地址 ...
随机推荐
- PropertyValuesHolder学习
package com.loaderman.customviewdemo; import android.animation.ObjectAnimator; import android.animat ...
- php实现手机定位功能的实例
最近在做通过定位手机用户,进行消息推送,经过分析最终做法如下 mobile.php文件 当用户当手机访问该页面时,通过实现页面表单隐藏封装自动提交获取手机浏览器经纬度并post给服务器 1 2 3 4 ...
- SQL 模糊查询条件的四种匹配模式
转: 执行数据库查询时,有完整查询和模糊查询之分. 一般模糊语句格式如下: SELECT 字段 FROM 表 WHERE 某字段 LIKE 条件; 其中,关于条件,SQL提供了四种匹配模式: 1.%: ...
- 一百四十一：CMS系统之根据板块过滤显示帖子
视图,根据传过来的板块id查数据 @bp.route('/')def index(): board_id = request.args.get('board_id', type=int, defaul ...
- js往标签下插入标签的方法
js="document.getElementsByClassName('CodeMirror-line')[0].innerHTML = 'xxxxxx'"dr.execute_ ...
- IIS添加对ashx文件的支持
IIS添加对ashx文件的支持 第一步:每个网站都有个“处理程序映射”,用于添加对各种文件的处理程序 第二步:进入“处理程序映射",可以看到对各种文件的处理程序列表,其中就有对ashx文件的 ...
- 如何去除PATH里的重复项并排序
注意sed的用法,linux和Mac os不同,linux是Gnu的,Mac是BSD的 PATH排序去掉重复内容 mac和linux的换行符替换方法不一样,如下是Mac下的操作 export PATH ...
- 月光大盗(moon thief)
欢迎大家玩月光大盗! welcome to play moon thief!developer email:zhangdeke@126.com
- webpack简单配置
1.代理配置 需要修改一下配置文件 config里的index.js,根据接口特点自主选取 2.解决图标显示路径错误问题 项目在打包完成后如果出现图片显示不了的问题,需要进行如下配置
- 给引入页面的js和css资源加上版本号，防止浏览器缓存资源
最近因为在做前端开发的相关工作,每次发布新版本以后,不到5分钟,测试童鞋一个接一个的抱怨说BUG根本就没有修改,这个时候你说的最多的话就是“清缓存!!清页面缓存!!你没有清缓存!!你清理了页面缓存就对 ...