用Ajax做检测用户名项目是否被注册常见的问题

最新推荐文章于 2022-04-27 17:38:45 发布

意外

最新推荐文章于 2022-04-27 17:38:45 发布

阅读量119

点赞数

分类专栏： Java工具 Ajax 文章标签： ajax java

本文链接：https://blog.csdn.net/qq_42472710/article/details/110451299

版权

Java工具同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

JSP源码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>账号注册</title>
<script type="text/javascript">
    function createXMLHttpRequest(){
        try{
            return new XMLHttpRequest();
        }catch(e){
            try{
                return new ActiveXObject(Msxm12.XMLHTTP);
            }catch(e){
                try{
                    return new ActiveXObject(Microsoft.XMLHTTP);
                }catch(e){
                    throw e;
                }
            }
        }
    }
    
    window.onload = function(){
        var uname = document.getElementById("uname");
        uname.onblur = function(){
            //1、得到异步对象
            var xmlhttp = createXMLHttpRequest();
            //2、打开连接<c:url value='/register'/>
            var user = uname.value;
            xmlhttp.open("POST","register?username="+user,true)
            //3、设置请求头
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            //4、发送请求
            xmlhttp.send(null);
            //5、给cmlhttp的onreadystatechange事件注册监听
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var text = xmlhttp.responseText;
                    var span = document.getElementById("span");
                    if(text == "1"){
                        span.innerHTML = "该账号已经被占用了";
                    }else{
                        span.innerHTML = "";
                    }
                }
            };
        };
    };
</script>
</head>
<body>
<form action="" method="post">
<h1>演示账号是否被注册</h1>
账号：<input type="text" name="username" id="uname"/><span id="span"></span><br/>
密码：<input type="password" name="password" id="pass"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>

Servlet源码：

package register;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/register")
public class register extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        
        String username = request.getParameter("username");
        if (username.equalsIgnoreCase("wjj")) {
            response.getWriter().print("1");
        }else {
            response.getWriter().print("0");
        }
    }

}

常见问题：

1、编码问题：在访问jsp中可能出现中文乱码问题

应该在Servlet文件中设置如下属性：

        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");

2、在鼠标离开账号输入框后并没有出现想象的结果----提示用户名是否已被注册

var user = uname.value;
xmlhttp.open(“POST”,“register?username=”+user,true); //打开连接因为用户名是动态变量，所有要把获取都是用户名放在双引号外面

xmlhttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”) //使用post提交表单的方式要加上这段请求头
xmlhttp.send(null); //若不填入null 有

意外

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Ajax做检测用户名项目是否被注册常见的问题

JSP源码：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equ
复制链接

扫一扫