项目的目录结构

源代码：

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. ACC自适应巡航控制系统介绍

    本文是关于ACC自适应巡航控制系统的介绍,罗孚从个人视角出发,描述对ACC系统的理解,以及在一些使用场景下的思考. 什么是ACC? ACC系统是在定速巡航装置的基础上发展而来的,区别在于定速巡航只能限 ...

  2. CentOS7通过rsync+crontab实现两台服务器文件同步

    centos7系统中已经默认安装rsync 1:主服务器配置 (1)修改rsyncd.conf 配置文件 [root@localhost app]# vi /etc/rsyncd.conf motd ...

  3. Keras/Tensorflow选择GPU/CPU运行

    首先,导入os,再按照PCI_BUS_ID顺序,从0开始排列GPU, import os os.environ["CUDA_DEVICE_ORDER"] = "PCI_B ...

  4. 数据分析：基于Python的自定义文件格式转换系统

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. 每天一个linux命令:chown

    1.命令简介         chown(Change owner) 用来改变某个文件或目录的所有者和所属的组,该命令可以向某个用户授权,使该用户变成指定文件的所有者或者改变文件所属的组.用户可以是用 ...

  6. 【转】最近很火的 Safe Area 到底是什么

    iOS 7 之后苹果给 UIViewController 引入了 topLayoutGuide 和 bottomLayoutGuide 两个属性来描述不希望被透明的状态栏或者导航栏遮挡的最高位置(st ...

  7. Centos7.4 安装Docker

    一.安装docker yum install -y docker 二.启动docker服务 systemctl start docker 三.设置成开机启动docker服务 systemctl ena ...

  8. Elasticsearch索引mapping的写入、查看与修改(转)

    mapping的写入与查看 首先创建一个索引: curl -XPOST "http://127.0.0.1:9200/productindex" {"acknowledg ...

  9. python3 利用正则获取网页中的想保存下来的内容

    需要获取某个网页中表格部分中某个产品的成份 分析在html中成份的元素代码 <a href="/composition/4c3060178d1184935a48c4e51be4f63f ...

  10. MySql基本查询、连接查询、子查询、正则表达查询解说

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 查询数据指从数据库中获取所须要的数据.查询数据是数据库操作中最经常使用,也是最重要的操作.用户 ...