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中调用的后端地址 ...
随机推荐
- 0.9.0.RELEASE版本的spring cloud alibaba nacos+feign实例
这里的feign依然是原来的feign,只不过将注册中心由eureka换成了nacos.服务提供方参见0.9.0.RELEASE版本的spring cloud alibaba nacos实例,消费方跟 ...
- React Native 中的 Flex Box 的用法（水平布局、垂直布局、水平居中、垂直居中、居中布局）
版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...
- Cas（02）——部署Cas Server
部署Cas Server Cas应用都需要有一个Cas Server.Cas Server是基于Java Servlet实现的,其要求部署在Servlet2.4以上版本的Web容器中.在此笔者将其部署 ...
- 关于async await的测试
async await的教程:https://www.cnblogs.com/zhaoshujie/p/11192036.html 异步方法: private async Task<string ...
- OpenCV计算机视觉实战(Python版)资源
疲劳检测 pan.baidu.com/s/1Ng_-utB8BSrXlgVelc8ovw #导入工具包 from scipy.spatial import distance as dist from ...
- 遵循统一的机器学习框架理解高斯混合模型（GMM）
遵循统一的机器学习框架理解高斯混合模型(GMM) 一.前言 我的博客仅记录我的观点和思考过程.欢迎大家指出我思考的盲点,更希望大家能有自己的理解. 本文参考了网络上诸多资料,特别是B站UPshuhua ...
- Python----数据预处理代码实例
为方便收藏学习,转载自:https://www.jb51.net/article/158168.htm 本文实例为大家分享了Python数据预处理的具体代码,供大家参考,具体内容如下 1.导入标准库 ...
- 机器学习算法-K-NN的学习 /ML 算法 （K-NEAREST NEIGHBORS ALGORITHM TUTORIAL）
1为什么我们需要KNN 现在为止,我们都知道机器学习模型可以做出预测通过学习以往可以获得的数据. 因为KNN基于特征相似性,所以我们可以使用KNN分类器做分类. 2KNN是什么? KNN K-近邻,是 ...
- Windows 10系统永久关闭Windows Defender Antivirus防病毒程序方法
Win + R 键运行 gpedit.msc 找到 计算机配置 -> 管理模板 -> Windows 组件 -> Windows Defender 防病毒程序 右边双击 “关闭Win ...
- 【C/C++开发】运算符重载
c++的一大特性就是重载(overload),通过重载可以把功能相似的几个函数合为一个,使得程序更加简洁.高效.在c++中不止函数可以重载,运算符也可以重载.由于一般数据类型间的运算符没有重载的必要, ...