1工育、在webContent 下的reg.jsp文件中引用js文件夾下的jquery和reg.js文件
<script src="js/jquery1.11.3.min.js"></script>
<script src="js/reg.js"></script>
2、在reg.jsp的body中添加表單
<form action="" method="post">
<pre>
用戶名:<input type='text' name='userName'><span id="s1"></span>
密碼:<input type='password' name='userPassword'>
確認密碼:<input type='password' name='repwd'>
<input type='submit' name='sub' value="注冊">
</pre>
</form>
3鹃愤、在reg.js中寫jquery和ajax
$(function(){
$(":text[name='userName']").blur(function(){
//1簇搅、獲得用戶名
var userName=$(this).val();
//2、通過異步傳輸對象將用戶名傳到服務器软吐，服務器查詢數(shù)據(jù)庫得到結(jié)果并返回
$.get("CheckUnameServlet?userName="+userName,function(data){
if(data=="1"){
$("#s1").html("該用戶已注冊");
}else{
$("#s1").html("可以注冊");
}
})
})
})
4瘩将、在CheckUnameServlet中寫服務器連接數(shù)據(jù)庫代碼,這個servlet放在src下的名為servlet的包下
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
//禁用緩存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
String userName = request.getParameter("userName");
String sql="select * from 數(shù)據(jù)表名 where userName=?";
List<Object> paramList=new ArrayList<Object>();
paramList.add(userName);
DbHelper dbHelper=new DbHelper();
List<Map<String, Object>> list = dbHelper.executeQuery(sql, paramList);
if(list!=null && list.size()>0) {
response.getWriter().print("1");
}else {
response.getWriter().print("0");
}
}
5、其中引用了禁用緩存代碼
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
6凹耙、其中調(diào)用了自己寫的工具類：DbHelper.java姿现，放在JavaResources下的util包下
package util;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Properties;
import javax.print.attribute.standard.RequestingUserName;
public class DbHelper {
private Connection connection;
private PreparedStatement preparedStatement;
private ResultSet resultSet;
public DbHelper()
{
getConnection();
}
//與數(shù)據(jù)庫連接
public void getConnection()
{
try {
if(connection==null || connection.isClosed())
{
//獲取db.properties中的數(shù)據(jù)
Properties properties=new Properties();
InputStream iStream=this.getClass().getResourceAsStream("/db.properties");
properties.load(iStream);
String driver=properties.getProperty("driver");
String url=properties.getProperty("url");
String uname=properties.getProperty("uname");
String pwd=properties.getProperty("pwd");
Class.forName(driver);
this.connection= DriverManager.getConnection(url, uname, pwd);
}
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//實現(xiàn)增刪改操作
public int executeUpdate(String sql,List<Object> paramList)
{
getConnection();
try {
this.preparedStatement=connection.prepareStatement(sql);
//如果在數(shù)據(jù)庫中查詢到對應信息，則返回更新
if(paramList!=null)
{
for(int i=0;i<paramList.size();i++)
{
this.preparedStatement.setObject(i+1, paramList.get(i));
}
}
return this.preparedStatement.executeUpdate();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
close();
}
return 0;
}
//執(zhí)行查詢操作
public List<Map<String, Object>> executeQuery(String sql,List<Object> paramList)
{
getConnection();
try {
this.preparedStatement=connection.prepareStatement(sql);
if(paramList!=null)
{
for(int i=0;i<paramList.size();i++)
{
this.preparedStatement.setObject(i+1, paramList.get(i));
}
}
this.resultSet= this.preparedStatement.executeQuery();
List<Map<String, Object>> resultList=new ArrayList<Map<String,Object>>();
ResultSetMetaData resultSetMetaData= this.resultSet.getMetaData();
while(resultSet.next())
{
Map<String, Object> map=new HashMap<String,Object>();
for(int i=1;i<=resultSetMetaData.getColumnCount();i++)
{
String columnname= resultSetMetaData.getColumnName(i);
Object columnvalue=resultSet.getObject(columnname);
map.put(columnname, columnvalue);
}
resultList.add(map);
}
return resultList;
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
close();
}
return null;
}
//執(zhí)行關閉操作
public void close()
{
if(resultSet!=null)
try {
resultSet.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if(preparedStatement!=null)
try {
preparedStatement.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if(connection!=null)
try {
connection.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
7肖抱、其中使用了db.properties文件备典，文件放在src文件夾下
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/數(shù)據(jù)庫名?characterEncoding=utf-8
uname=數(shù)據(jù)庫用戶名
pwd=數(shù)據(jù)庫密碼
