项目的目录结构

源代码：

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. Elasticsearch跨集群搜索(Cross Cluster Search)

    1.简介 Elasticsearch在5.3版本中引入了Cross Cluster Search(CCS 跨集群搜索)功能,用来替换掉要被废弃的Tribe Node.类似Tribe Node,Cros ...

  2. shell编程学习笔记（十一）：Shell中的while/until循环

    shell中也可以实现类似java的while循环 while循环是指满足条件时,进行循环 示例: #! /bin/sh index=10 while [ $index -gt 0 ] do inde ...

  3. [C#] 将NLog输出到RichTextBox，并在运行时动态修改日志级别过滤

    作者: zyl910 一.缘由 NLog是一个很好用的日志类库.利用它,可以很方便的将日志输出到 调试器.文件 等目标,还支持输出到窗体界面中的RichTextBox等目标. 而且它还支持在运行时修改 ...

  4. 城市经纬度 json 理解SignalR Main(string[] args)之args传递的几种方式 串口编程之端口 多线程详细介绍 递归一个List<T>，可自己根据需要改造为通用型。 Sql 优化解决方案

    城市经纬度 json https://www.cnblogs.com/innershare/p/10723968.html 理解SignalR ASP .NET SignalR 是一个ASP .NET ...

  5. Tokyo Tyrant（TTServer）系列（一）－介绍和安装

    Tokyo Cabinet 是日本人Mikio Hirabayashi 开发的一款DBM 数据库,该数据库读写很快.哈希模式写入100 万条数据仅仅需0.643 秒.读取100 万条数据仅仅需0.77 ...

  6. Vue在线客服系统【开源项目】

    1. 项目介绍 一个基于Vue2.0的在线客服系统. 技术栈包含:Vue.VueX.Vue Router.Element UI. 2. 功能介绍 项目包含了2个模块:客服端和访客端. 2.1 客服端功 ...

  7. CentOS 服务器添加简易"回收站"

    删除是危险系数很高的操作,一旦误删可能会造成难以估计的损失.比如,一条简单的语句:rm –rf /* 就会把整个系统全部删除,而 Linux 并不会因为这条语句的不合理而拒绝执行. 在 Windows ...

  8. curl模拟访问已经存在的cookie

    curl 'http://i.meituan.com/brunch/order?status=2' -H 'Pragma: no-cache' -H 'Accept-Encoding: gzip, d ...

  9. idea maven 集成多模块 module

    首先第一步创建 顶级项目  也就是父项目 在创面那部中 不管你勾不勾 create from 那个选项 都无所谓,最终创建的项目要全删的 ,只保留pom.xml 父项目结构 接下来 创建子项目  也是 ...

  10. Win7 SP1 64位 旗舰版 IE8 快速稳定 纯净优化 无人值守 自动激活 20180604

    一.系统特色 1.采用微软原版旗舰版定制而成. 2.优化系统服务,关闭一些平时很少使用的服务. 3.精简掉一些无用的东西. 4.系统全程离线制作,不包含任何恶意插件,放心使用. 5.右下角时间加上星期 ...