项目的目录结构

源代码：

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. Nginx配置，413 Request Entity Too Large错误解决

    今天有同事找我,说图片上传之后,不知道去哪里了.分析了一下问题,找到原因之后做了处理,这里简要记录一下. 问题原因: 1.首先后台log并无错误信息: 2.捡查了一下浏览器,发现network中有报错 ...

  2. TensorFlow迭代速度变慢的问题

    最近用TensorFlow实现遗传算法(Genetic Algorithms),发现迭代速度越来越慢,用time.time()观察以后,发现每次迭代都要比上一次慢0.5秒左右,但是每次迭代的计算量是差 ...

  3. Laravel: 基础篇

    一.安装 1)采用一键安装包 http://laravelacademy.org/resources-download 2)Mac 上安装 ----------在Mac上安装composer----- ...

  4. 3分钟搞明白信用评分卡模型&模型验证

    信用评分卡模型在国外是一种成熟的预测方法,尤其在信用风险评估以及金融风险控制领域更是得到了比较广泛的使用,其原理是将模型变量WOE编码方式离散化之后运用logistic回归模型进行的一种二分类变量的广 ...

  5. 理解Java注解类型

    一. 理解Java注解 注解本质是一个继承了Annotation的特殊接口,其具体实现类是Java运行时生成的动态代理类.而我们通过反射获取注解时,返回的是Java运行时生成的动态代理对象$Proxy ...

  6. vue-router2.x使用入门

    组件中的路由 <router-link to=""></router-link> 无参数 <router-link to="/ar/1&qu ...

  7. Clash Royale开发日志

    2018-04-17 本次更新: [修复点击时间bug] [修复断线重连后不自动开始脚本bug] 2018-04-16 本次更新增加以下功能: [支持断线重连机制(5分钟)] [界面UI设置] 201 ...

  8. docker的/var/lib/docker/overlay文件夹突然占满了硬盘

    场景描述 事情是这样的,前两天客户的服务器突然断电了,导致用docker部署的服务也挂了.昨天去现场,重启了docker,同时准备更新一下服务.结果发现有一台节点硬盘满了- 还是觉得有些奇怪的,毕竟d ...

  9. Airtest iOS测试环境部署

    [本文出自天外归云的博客园] 简介 这个Airtest IDE是通过iOS-Tagent来操作iPhone的,你可以在Airtest IDE里录制脚本来实现自动化操作iPhone 前提 1. 得有个i ...

  10. Netty WebSocket 开发

    代码: Server package netty.protocol.websocket.server; import io.netty.bootstrap.ServerBootstrap; impor ...