使用Ajax 判断 用户名是否被占用

一、原生JS 

view层:前台页面  UserInfoAdd4JSAjax.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>




用户信息新增
    
    
    
    

    
    
    
    
    
    


请输入您的注册信息

 

service层  CheckUsername4Ajax      CheckUsername4Ajax Servlet

package com.mwb.control;

import java.io.IOException;
import java.util.List;

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 com.mwb.bean.UserInfo;
import com.mwb.model.UserInfoModel;
import com.mwb.utils.EasyFactory;

/**
 * 原生的Js方式
 * 通过Ajax 检查用户名是否可以使用
 */
@WebServlet("/CheckUsername4Ajax")
public class CheckUsername4Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String username = request.getParameter("username");
		//String un = new String(username.getBytes("iso-8859-1"),"utf-8");
		System.out.println("在CheckUsername4Ajax 中 打印 前台写入的注册用户名 " + username);
		List list = EasyFactory.getNewInstance(UserInfoModel.class).queryUserInfoByParams(username);
		System.out.println("在CheckUsername4Ajax 中 打印 查询到的list集合 " + list.size());
		if(list.size()>0) {
			//说明用户名已经被占用 不能注册
			response.getWriter().println("0");
		}else {
			//用户名没有被占用可以注册
			response.getWriter().println("1");
		}
	}

}

 

Model层 (使用DBUtils)

package com.mwb.model;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.sql.DataSource;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.ResultSetHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.mwb.bean.PageBean;
import com.mwb.bean.UserInfo;
import com.mwb.db.DBCPDataSource;
import com.mwb.db.DBProvider;
import com.mwb.utils.EasyFactory;
import com.mwb.utils.MyUtils;

import sun.security.pkcs11.Secmod.DbMode;

public class UserInfoModel {

	
	public List queryUserInfoByParams(String username){
		
		List list = new ArrayList();
		String strSql = "select * from tuserinfo where user_name = ?";
		List lst = null;
		if(username!=null && !username.equals("")) {
			lst = EasyFactory.getNewInstance(DBProvider.class).query(strSql, new BeanListHandler(UserInfo.class), username);
		}else {
			System.err.println("查询的用户名为null");
		}
		return lst;
	}

	

}
 
  

展示效果

当用户名已经被注册时  显示提示信息并且将注册按钮不可点击

使用Ajax 判断 用户名是否被占用_第1张图片

 

当用户名未被使用 可以注册时  显示信息并且注册按钮可以点击

使用Ajax 判断 用户名是否被占用_第2张图片

 

二 、 使用Jquery的Ajax请求(代码编写量大大减少)

前台页面 UserInfoAdd4JQAjax.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8"%>




用户信息新增
    
    
    
    

    
    
    
    
    
    


请输入您的注册信息

 

你可能感兴趣的:(前端)