项目的目录结构

源代码：

regservlet.java

package register;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class regservlet

 */

@WebServlet("/regservlet")

public class regservlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public regservlet() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

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

        PrintWriter out = response.getWriter();

        // 获取用户名

        String name = request.getParameter("username");

        // 模拟数据库

        if ("张运涛".equals(name)) {

            // out.println("用户名已存在");

            out.println("<font color=red>用户名已存在</font>");

        } else if (name.equals("")) {

            out.println("<font color=red>用户名不能为空</font>");

        } else {

            // out.println("用户名可以使用");

            out.println("<font color=blue>用户名可以使用</font>");

        }

        out.flush();

        out.close();

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

register.js

window.onload = function() {

    document.getElementById("username").onblur = function() {

        // 获取<input type="text" name="username" value="" id="username">

        var username = document.getElementById("username").value;

        //

        var xmlHttp = ajaxFunction();

        //

        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState == 4) {

                if (xmlHttp.status == 200 || xmlHttp.status == 304) {

                    var data = xmlHttp.responseText;

                    document.getElementById("divcheck").innerHTML = data;

                }

            }

        }

        //

        xmlHttp.open("post", "../regservlet?timeStamp=" + new Date().getTime(),

                true);

        xmlHttp.setRequestHeader("Content-Type",

                "application/x-www-form-urlencoded");

        //

        xmlHttp.send("username=" + username);

    }

}

function ajaxFunction() {

    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;

}

register.jsp

<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>校验用户名是否存在</title>

<script type="text/javascript" src="./register.js">

</script>

</head>

<body>

    <center>

        <form action="" enctype="application/x-www-form-urlencoded">

            <h3>请填写用户注册信息</h3>

            <table border="1">

                <tr>

                    <td>用户名:</td>

                    <td><input type="text" name="username" value="" id="username">

                        <!--  用户名已存在显示在div 中 -->

                        <div id="divcheck"></div>

                </tr>

                <tr>

                    <td>密码:</td>

                    <td><input type="password" name="psw" value=""></td>

                </tr>

            </table>

        </form>

    </center>

</body>

</html>

运行截图：

完整源代码https://pan.baidu.com/s/1PSjQuU96emWL1UYYMKwlaA

ajax方式提交表单数据并判断当前注册用户是否存在的更多相关文章

  1. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  2. tp5中ajax方式提交表单

    用ajax提交表单,迅速,快捷,实现页面无刷新提交表单. <!DOCTYPE html> <html lang="en"> <head> < ...

  3. HPCMS V9使用ajax方式提交表单

    一.前台模板(注:需要引入jquery文件) <form id="myform" class="subscribe-form subscription" ...

  4. 使用ajax异步提交表单数据（史上最完整的版本）

    额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度. 那么,就来看看把,先给数据库表截个图哈 然后写项目被 我 ...

  5. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  6. django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  7. form表单提交转为ajax方式提交

    <form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...

  8. Spring Boot(三)：RestTemplate提交表单数据的三种方法

    http://blog.csdn.net/yiifaa/article/details/77939282 ********************************************** ...

  9. 百度编辑器ueditor通过ajax方式提交，不需要事先转义字符的方法(异常：从客户端(xxx)中检测到有潜在危险的 Request.Form 值)

    最近项目中使用百度编辑神器ueditor,确实是很好用的一款编辑器.官网教程提供的与后端数据交互都是跟表单方式有关的,项目中使用的是ajax方式提交,因此出现了不少问题,现在记录备忘下. 环境:.ne ...

随机推荐

  1. Android、iOS、和Web如何做灰度发布？

        主要参考了: https://www.zhihu.com/question/21714205     https://www.zhihu.com/question/28296375  一.概述 ...

  2. Javascript正则表达入参是null

    今天群友问了一个问题,如下的执行结果是什么? var reg = /^[a-z0-9\u4e00-\u9fa5]{0,15}$/; console.log(reg.test(null)); // tr ...

  3. table表格内容溢出处理

    直接在table标签加上  style="table-layout:fixed;word-wrap:break-word;"

  4. 目前流行前端几大UI框架

    title: "Windows照片查看器-召回大法" categories: windows tags: windows author: LIUREN --- Windows照片查 ...

  5. 解决python3环境下twisted安装问题

    twisted的安装经常会出问题,提示: 1.twisted错误,报Unable to find vcvarsall.bat2.等 解决办法: 1.安装wheel,命令:pip install whe ...

  6. sql 有条件计数

    select InstitutionID=LEFT(InstitutionID,9), Irregularities_Type=sum(CASE WHEN Irregularities_Type> ...

  7. Effective Java 第三版——71. 避免不必要地使用检查异常

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  8. What’s new for Spark SQL in Apache Spark 1.3（中英双语）

    文章标题 What’s new for Spark SQL in Apache Spark 1.3 作者介绍 Michael Armbrust 文章正文 The Apache Spark 1.3 re ...

  9. ThreadPoolExcutor 线程池 异常处理 （下篇）

    前言 因为这是之前面试的一个题目,所以印象比较深刻,前几天写了一篇文章:ThreadPoolExcutor 线程池 异常处理 (上篇) 中已经介绍了线程池异常的一些问题以及一步步分析了里面的一些源代码 ...

  10. (8) MySQL主从复制架构使用方法

    一. 单个数据库服务器的缺点 数据库服务器存在单点问题 数据库服务器资源无法满足增长的读写请求 高峰时数据库连接数经常超过上限 二. 如何解决单点问题 增加额外的数据库服务器,组建数据库集群 同一集群 ...