专栏首页Java技术分享圈杨校老师课堂之使用Ajax校验用户名是否可用

杨校老师课堂之使用Ajax校验用户名是否可用

页面代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用Ajax校验用户名是否可用</title>
    <script src="js/jquery-1.7.2.min.js"></script>
   
</head>
<body>
    <form>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="span_username"></span>
        <br/>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="戳我来注册"><br>
    </form>

</body>
</html>
<script>
        //在页面加载完成后
        $(function () {
           //给username绑定blur(失焦)事件 | 光标离开username区域后
           $("#username").blur(function () {
               //获取username文本输入框的值
               var username = $(this).val();
               //发送ajax请求
                   //如果可用则显示:"此用户名太受欢迎,请更换一个"
                   //如果不可用则:"用户名可用"
                $.get("showUserServlet",{username:username},function (data) {
					   var span = $("#span_username");
					   if(data.userExsit){
						   //用户名存在
						   span.css("color","red");
						   span.html(data.msg);
					   }else{
						   //用户名不存在
						   span.css("color","green");
						   span.html(data.msg);
					   }
				   });
           }); 
        });
</script>

Servlet代码:

package cn.javabs.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
/**
 * 基于IDEA开发工具 | 并使用Servlet的3.0技术、可省略web.xml中映射代码的编写
 *@author:Mr.yang
 *
 */
@WebServlet("/showUserServlet")
public class ShowUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       
	   // 1. 设置响应的数据格式为json并且设置编码为utf-8
        response.setContentType("application/json;charset=utf-8");
		
		// 2. 获取用户名
        String username = request.getParameter("username");

        // 3. 调用service层判断用户名是否存在
        Map<String,Object> map = new HashMap<String,Object>();

        if("wangcai".equals(username)){
            //若用户名为“wangcai”存在
            map.put("userExsit",true);
            map.put("msg","此用户名太受欢迎,请更换一个");
        }else{
            //若用户名为“wangcai”不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        // 4.将map转为json,并且传递给客户端
			// 4.1 将map转为json
			ObjectMapper mapper = new ObjectMapper();
			// 4.2 并且传递给客户端
			mapper.writeValue(response.getWriter(),map);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 调用doPost方法,实现代码的复用性	
	   this.doPost(request, response);
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这就是我不建议去外包公司开发的原因?

    咱们每个人都是学了好久编程,做了好久的项目,目的也只是为了可以去一个不错的公司可以有一个不错前景的发展。

    杨校
  • 号称全网最快的数据库连接池HikariCP的工具类开发-HikariCPUtils

    杨校
  • 有些东西不想明白,你可能会一直再往下输

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    杨校
  • OpenStack(Pike)连接 Ceph RBD

    请注意,本文档假设 Ceph 和 OpenStack 环境已经可用,在此基础上,配置 OpenStack 使用 Ceph RBD 作为镜像和卷的后端存储。

    用户2443625
  • R Tricks: 如何巧为观测标记序号

    本期大猫课堂将会开始一个新的系列:你不知道的R Tricks。这个系列将搬运stackoverflow.com(以后简称SO)上关于R数据处理的一些经典问答。大...

    用户7652506
  • [TextMatch框架] 生成词云

    TextMatch is a semantic matching model library for QA & text search … It’s easy ...

    MachineLP
  • 转向Kotlin——对象

    在Java中又匿名类的概念,也就是说,在创建类的时候,无需指定类的名字。匿名类一般用于方法参数。基本理念就是方法需要接收一个类或者接口的实例,而这个实例只是在该...

    蜻蜓队长
  • PHP常用魔术方法

    方法名称 使用场景 __construct 对象创建完成后第一个被对象自动调用的方法 __destruct 销毁一个类之前执行的一些操作 ...

    Clive
  • 一条sql语句究竟是如何执行的

    相信做后端的同学肯定离不开一个话题,就是 mysql,大家也花式的执行过各种各样的 sql 语句,然后得到返回结果,那么一条 sql 语句执行究竟经历了哪些步骤...

    程序员养成日记
  • AndroidStudio编写jni自动补全

    AndroidStudio写JNI没有提示,就像写txt一样,百度了一大圈也没有解决问题,什么升级as,升级gradle都不管用,下面记录一下解决办法:

    坑吭吭

扫码关注云+社区

领取腾讯云代金券