项目的目录结构

源代码：

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. 巧用Openlayers4的Style

    原文:https://blog.csdn.net/gisshixisheng/article/details/80149087 概述 非常细化Openlayers4中的StyleFunction,因为 ...

  2. OpenCV 对矩阵进行掩码操作

    Mask operations on matrices https://docs.opencv.org/master/d7/d37/tutorial_mat_mask_operations.html ...

  3. SNF软件开发机器人-子系统-表单-表单设计

    表单设计 在我们做程序时总要对表单的内容进行设计,然而对控件位置等信息的调整总是麻烦的,还常常容易出错.SNF软件机器人完美的解决了这个问题. 1.效果展示: 2.使用说明: (1)打开页面,选中开发 ...

  4. 一起来学习linux创建用户useradd命令

    linux创建用户useradd命令 原文地址:linux创建用户useradd命令 http://www.xfcodes.com/linuxcmd/user/24308.htm 一,adduser与 ...

  5. Atitit s2018.2 s2 doc list on home ntpc.docx  \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 讯飞科大 语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化 每日心灵 鸡汤 值班 发布.docx \Atitit 几大研发体系对比 Stage-Gat

    Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系  法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别   ...

  6. [docker]通过阿里云源安装docker && flannel不通问题解决(try this guy out)

    docker清理容器 # 容器停止后就自动删除: docker run --rm centos /bin/echo "One"; # 杀死所有正在运行的容器: docker kil ...

  7. [db]mysql全量迁移db

    机房要裁撤, 原有的老业务机的mysql需要迁移到新的. 方案1: 全量打包拷贝data目录, 发现拷过去各种毛病 方案2: mysqldump逻辑导出解决问题 新的db刚安装好. 步骤记录下. # ...

  8. [elk]bin/elasticsearch-sql-cli使用

    在探sql groupby语句 这个长久不用竟然忘记 part name age dep1 ara 22 dep1 arb 22 dep1 arc 22 dep2 ema 10 dep2 emc 11 ...

  9. 强化学习-Q-Learning算法

    1. 前言 Q-Learning算法也是时序差分算法的一种,和我们前面介绍的SARAS不同的是,SARSA算法遵从了交互序列,根据当前的真实行动进行价值估计:Q-Learning算法没有遵循交互序列, ...

  10. 【iCore1S 双核心板_ARM】例程十六：USB_MSC实验——虚拟U盘

    实验步骤: 1.将SD卡插在SD卡槽中. 2.将跳线冒跳至USB_Device,将USB_Device通过Micor USB线与USB主机(电脑)相连. 3.烧写程序,我的电脑中将出现一个磁盘. 实验 ...