使用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);
}
}