重构校验用户名是否存在的代码

使用jQuery操作Ajax校验用户名

之前使用了原生javascript操作ajax还是有很多不方便的地方,不过在新版的js中提供了更方便的操作方式,这个我们在后面再介绍,这里先使用jQuery来操作ajax。

代码示例:

创建html添加一个input:

    用户名:<input type="text" name="name" /><span id="msg"></span><br/>

在前台中添加onblur事件绑定,然后使用ajax完成异步请求

$(function() {
    $("#name").blur(function () {
        $.ajax({
            url:"/regist" , //请求路径
            type:"get" , //请求方式
            data:{"name":this.value},//请求参数
            dataType:"text",//设置接受到的响应数据的格式
            //回调函数
            success:function (data) {
                if (data == "true") {
                    $("#msg").html("<font color='red'>用户名已存在</font>");
                }else {
                    $("#msg").html("可以使用");
                }

            },
            error:function () {
                console.log("出错啦...")
            }//表示如果请求响应出现错误,会执行的这个回调函数

        })
    });
});

创建用来处理请求的servlet,这里省略JDBC数据库相关的操作,直接将用户名写死在程序中:

package com.monkey1024.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 注册
 */
@WebServlet("/regist")
public class RegistServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");
        if("monkey1024".equals(name)){
            out.print(true);
        }else{
            out.print(false);
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

}