2021-06-08

使用ajax写一个用户注册小界面
步骤
创建注册界面 -->创建数据库 --> 在jsp页面进行跳转servlet界面–>servlet界面获取将jsp页面的输入的数据 -->在dao下进行check用户名信息 -->在daoimpl下进行关于用户名查找的具体的实现 -->转到servlet界面获取查找数据库里面的是否具有用户输入的数据进行反馈到jsp页面

代码部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1. 创建对象
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;
 }

	//1.创建对象 
	function checkUserName() {
		
		//获取输入框的值
		var name = document.getElementById("name").value;
		
		alert("name " + name);
		//创建对象
		var requset = ajaxFunction();
		
		//发送请求
		request.open("post" ,"/Ajax/DemoServlet01",true);
		//注册状态发生改变监听,获取服务器传来的数据
		
		request.onreadystatechange = function(){
			if(request.readyState == 4 && rquest.status == 200){
				var  data = request.responseText;
				if(date == 1){
					document.getElementById("span01").innerHtml = "<font color = 'red'> 用户名已经存在 </font>"
				}else{
					document.getElementById("span01").innerHtml = "<font color = 'green'> 用户名不存在 </font>"
				}
			}
		}
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//带数据 输入框里面的值
		request.send("name= " + name);
	}

 
</script>
</head>
<body>
<table  border="1" width= "500">
	<tr>
		<td>用户名</td>
		<!-- 失去焦点时发送请求 -->
		<td><input type="text" name = "name" id = "name" onblur="checkUserName">  </td><span id ="span1"></span>
	</tr>
	<tr>
		<td>密码</td>
		<td><input type="password" name = ""></td>
	</tr>
	<tr>
		<td>邮箱</td>
		<td><input type="text" name = ""></td>
	</tr>
	<tr>
		<td>简介</td>
		<td><input type="text" name=""></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" value="注册"></td>
	</tr>
</table>
</body>
</html>
package com.dao;

import java.sql.SQLException;

public interface UserDao {

	/*
	 检测用户名是否存在
	 */
	//检测 true 存在 
	//false 不存在
	boolean checkUserName(String username) throws SQLException ;
}

package com.dao.impl;

import java.sql.SQLException;

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

import com.dao.UserDao;
import com.util.JDBCUtil;

public class UserDaoImpl implements UserDao{
 
	//查询
	@Override
	public boolean checkUserName(String username) throws SQLException {
		QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
		String sql = "select count(*) from t_user where username = ?";
												//返回值为Boolean值
		Long result =  (Long) runner.query(sql, new ScalarHandler(),username);
		//大于0 true 		因为有值则会返回大于0
		//小于等于0 false
		return result>0;
	}

}

package com.servlet;

import java.io.IOException;
import java.sql.SQLException;

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.dao.UserDao;
import com.dao.impl.UserDaoImpl;

/**
 * Servlet implementation class DemoServlet01
 */
@WebServlet("/DemoServlet01")
public class DemoServlet01 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public DemoServlet01() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			
			request.setCharacterEncoding("utf-8");
			//检测是否存在
			String name = request.getParameter("name");
			System.out.println("name" + name);
			UserDao dao  = new UserDaoImpl();
			//Boolean返回
			boolean exist = dao.checkUserName(name);
			
			//通知页面是否有
			if(exist) {
				//因为write 的是字符串1 
				response.getWriter().println(1);	//存在用户名
			}else {
				response.getWriter().println(2);	//不存在
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}

	/**
	 * @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);
	}

}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值