使用ajax验证用户名是否被注册

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'ajax3.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
//创建异步对象,直接一步到位所有浏览器
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("哥们儿,您用的是什么浏览器啊?");
throw e;
}
}
}
}




window.onload = function() {
// 获取文本框元素,给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开连接
xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>", true);
//3.设置请求头:Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求,给出请求体
xmlHttp.send("username=" + userEle.value);

//5.给xmlHttp的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
//获取服务器的响应,判断是否为1
// 是:获取span,添加内容:“用户名已被注册”

var text = xmlHttp.responseText;

//得到span元素

var span = document.getElementById("errorSpan");
if(text == "1") {

span.innerHTML = "用户名已被注册!";
} else {
span.innerHTML = "";
}
}
};
};
};
</script>
  </head>
  
  <body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名:<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
密 码:<input type="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
  </body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您可以通过以下步骤实现: 1. 在前端页面中,添加一个文本框用于输入用户名,并添加一个按钮用于触发验证用户是否存在的操作。 2. 在按钮的点击事件中,使用Ajax向后端发送请求,以验证用户名是否存在。 3. 后端接收到请求后,查询数据库中是否存在用户名,如果存在,则返回一个存在的标识;否则返回一个不存在的标识。 4. 前端通过接收到的标识来判断用户名是否存在,并进行相应的操作,如提示用户或者允许用户进行下一步操作。 下面是一个使用jQuery实现的示例代码: ```javascript // 前端代码 $('#check_username_btn').click(function() { var username = $('#username_input').val(); $.ajax({ url: '/check_username', type: 'POST', data: {username: username}, success: function(data) { if (data.exist) { alert('该用户名已被占用!'); } else { alert('该用户名可以使用!'); } }, error: function() { alert('请求失败!'); } }); }); // 后端代码 from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/check_username', methods=['POST']) def check_username(): username = request.form.get('username') # 查询数据库中是否存在用户名 exist = db.query('SELECT * FROM users WHERE username=%s', [username]) return jsonify({'exist': exist}) if __name__ == '__main__': app.run() ``` 在上述代码中,我们使用jQueryajax方法向后端发送POST请求,请求的数据包括用户名。后端接收到请求后,查询数据库中是否存在用户名,如果存在,则返回一个存在的标识;否则返回一个不存在的标识。前端通过接收到的标识来判断用户名是否存在,并进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值