Ajax的基本用法前面已經提到過，並且在上文中我們已經封裝好了ajax，上文http://www.cnblogs.com/a986771570/p/8053935.html
並且可以拿來調用，現在我們來做一個小案例。
案例一:檢查用戶名是否可用
首先我們來看需求，要檢查用戶名是否可用，也就是用戶名是否存在數據庫那么數據庫是比不可少的了。
那么就先來寫一個建庫的sql語句吧
drop database if exists javaweb;
create database javaweb;
use javaweb;
create table t_users(
id bigint primary key auto_increment,#邏輯主鍵
account varchar(255) not null,
password varchar(255) not null,
isDeleted boolean default false
);
緊接着我們將t_user表中設置賬號為admin，密碼也為admin
由於要將數據庫的值取出來，那么就需要使用Jdbc來操作數據庫
Jdbc主要代碼,注意設置數據庫的賬號密碼，以及導入數據庫驅動包放到lib文件里
mysql-connector-java-5.1.7-bin
JDBC主要部分
private final static String dbdriver = "com.mysql.jdbc.Driver";
private final static String dburl = "jdbc:mysql://localhost:3306/javaweb?seUnicode=true&characterEncoding=UTF8";
private final static String dbusername = "root";
private final static String dbpassword = "root";
static
{
try
{
Class.forName(dbdriver);
} catch (ClassNotFoundException e)
{
throw new ExceptionInInitializerError(e);
}
}
public static Connection createConnection() throws SQLException
{
return DriverManager.getConnection(dburl, dbusername, dbpassword);
}
public static ResultSet executeQuery(Connection conn, String sql,
Object... parameters) throws SQLException
{
PreparedStatement ps = null;
try
{
ResultSet rs = null;
ps = conn.prepareStatement(sql);
for (int i = 0; i < parameters.length; i++)
{
ps.setObject(i + 1, parameters[i]);
}
rs = ps.executeQuery();
return rs;
} catch (SQLException ex)
{
close(ps);
throw ex;
}
}
public static void closeAll(ResultSet rs)
{
if (rs == null)
{
return;
}
try
{
close(rs.getStatement().getConnection());
close(rs.getStatement());
close(rs);
} catch (SQLException e)
{
}
}
UserDTO
緊接着，我們定義一個實體類來接受數據庫傳來的數據
package com.xyf.web6;
/**
* @賬號密碼實體類
* @author Ray
*
*/
public class UserDTO {
private int id;
private String account;
private String password;
private boolean isDeleted;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public boolean isDeleted() {
return isDeleted;
}
public void setDeleted(boolean isDeleted) {
this.isDeleted = isDeleted;
}
}
UserDAO
再然后就是在DAO層里執行相關的數據庫的查詢語句，存放到DTO實體類中
package com.xyf.web6;
import java.sql.ResultSet;
import java.sql.SQLException;
public class UserDAO {
public static UserDTO getByUserName(String account)
{
//接受JDBC查詢出來的數據
ResultSet rs=null;
try {
//查詢出賬戶的數據存放到rs
rs=JdbcUtils.executeQuery("select *from T_Users where account=?",account);
if(rs.next())
{
return toModel(rs);
}
else
{
return null;
}
}
catch (SQLException e)
{
throw new RuntimeException(e);
}
finally
{
JdbcUtils.closeAll(rs);
}
}
private static UserDTO toModel(ResultSet rs) throws SQLException
{
UserDTO userDto=new UserDTO();
userDto.setAccount(rs.getString("account"));
userDto.setAccount(rs.getString("password"));
System.out.println(rs.getString("account"));
return userDto;
}
}
Servlet端
最后就只剩下servlet和jsp端了，servlet需要獲得jsp端傳輸的數據執行校驗后返回。
package com.xyf.web6;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckUserNameServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String account =req.getParameter("account");
UserDTO userDTO=UserDAO.getUserByName(account);
resp.getWriter().print(userDTO==null?"ok":"error");
}
}
JSP端
JSP端用戶來輸入數據，導入上文配置好的ajax 並向服務器發送的請求，通過服務器處理后返回的值來獲得是否存在此賬戶，如此一個ajax的登陸校驗就完成了，通過msg來傳輸回到JSP端實現頁面的刷新
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="ajax.js"></script>
<script>
window.onload=function(){
var txtUserName= document.getElementById("txtUserName");
//onblur：焦點離開觸發onblur事件
txtUserName.onblur = function(){
//var username = txtUserName.value;
var username = this.value;
rpajax("checkUserName?username="+username,function(data){
var msg = document.getElementById("msg");
if(data=="ok")
{
msg.innerHTML = "用戶名可用";
msg.style.color = "green";
}
else if(data=="error")
{
msg.innerHTML = "用戶名已經被注冊 ";
msg.style.color = "red";
}
});
}
}
</script>
<body>
用戶名:<input type="text" id="txtUserName">
<span id="msg"></span>
</body>
</html>
操作演示
1.啟動servlet服務器
2.打開jsp頁面
3.輸入檢測的用戶名
如果輸入admin則返回用戶名被注冊了
這樣就完成了所有的校驗功能了