Ajax+js 和 Ajax+Jquery实现异步校验
程序员文章站
2022-07-12 20:59:37
...
web.html
<script type="text/javascript" src="${ pageContext.request.contextPath }/03_ajax_regist/regist.js"></script>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onblur="checkUsername()"><span id="s1"></span></td>
</tr>
<tr>
<td colspan="2"><input id="regBut" type="submit" value="注册"></td>
</tr>
Servlet.java
try{
// 接收参数:
String username = request.getParameter("username");
// 调用业务层:
UserService userService = new UserService();
User user = userService.findByUsername(username);
// 判断:
response.setContentType("text/html;charset=UTF-8");
if(user == null){
// 用户名可以使用.
response.getWriter().println(1);
//response.getWriter().println("<font color='green'>用户名可以使用</font>");
}else{
// 用户名已经被占用
response.getWriter().println(2);
//response.getWriter().println("<font color='red'>用户名已经被占用</font>");
}
}catch(Exception e){
e.printStackTrace();
throw new RuntimeException();
}
Ajax+js实现异步校验(了解)
* regist.js
function checkUsername() {
// 获得文本框的值:
var username = document.getElementById("username").value;
// 创建异步对象:
var xhr = createXMLHttp();
// 设置监听:
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
//
if (data == 1) {
document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
document.getElementById("regBut").disabled = false;
} else if (data == 2) {
document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被占用</font>";
document.getElementById("regBut").disabled = true;
}
}
}
}
// 打开连接:
xhr.open("GET", "/day15/ServletDemo2?username=" + username, true);
// 发送请求:
xhr.send(null);
}
function createXMLHttp() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
Ajax+Jquery实现异步校验(必须会)
* regist.js
$(function(){
$("#username").blur(function(){
// 获得文本框的值:
var username = $(this).val();
// 演示load方法:
// $("#s1").load("/day15/ServletDemo3",{"username":username});
// 演示get/post方法:
$.get("/day15/ServletDemo3",{"username":username},function(data){
if(data == 1){
$("#s1").html("<font color='green'>用户名可以使用</font>");
$("#regBut").attr("disabled",false);
}else if(data == 2){
$("#s1").html("<font color='red'>用户名已经存在</font>");
$("#regBut").attr("disabled",true);
}
});
});
});
使用load方式,在Servelt中可以直接返回输出的值.
// $("#s1").load("/day15/ServletDemo3",{"username":username});
//response.getWriter().println("<font color='green'>用户名可以使用</font>");
推荐阅读
-
PHP swoole和redis异步任务实现方法分析
-
php生成SessionID和图片校验码的思路和实现代码
-
动态脚本元素实现js的异步加载和执行的教程
-
C# 委托异步 和 async /await 两种实现的异步
-
BootstrapValidator实现注册校验和登录错误提示效果
-
JavaScript文件的同步和异步加载的实现代码
-
Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
-
Ajax+js 和 Ajax+Jquery实现异步校验
-
js实现登录注册框手机号和验证码校验(前端部分)
-
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板