1. 要求
在设计表单提交时,我们经常需要对表单的内容进行检查,然后再将表单提交到服务器进行相关的操作。这里以向数据库中添加一个用户名为例,主要要求有两点:(1) 提交用户名之前检查用户名是否为空,(2)后台查询数据库判断数据库中是否已有相同的用户名。
2. 设计
对于用户名是否为空,直接利用JS代码判断即可,对于数据库中是否已有相同的用户名需要利用Ajax查询数据库,然后返回一个判断标志,前台根据这个返回的判断标志,确定后面的操作。
实现这一功能主要用到了三个文件,两个servlet类,一个前台的jsp页面。前台jsp页面这里命名为 addUser.jsp 主要包含 html 的表单和javascript相关的代码。两个 servlet 类分别为 checkUser.java 和 addUser.java 。前者用来查询数据库中是否已经包含该用户名,后者是 form 表单提交的路径,用来插入数据到数据库。
3. 源码
addUser.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addUser</title>
<!-- 导入jquery库 -->
<script type="text/javascript" src="/demo/js/jquery-2.1.4.min.js"></script>
<script >
function checkUser(){
$.ajaxSetup({ async :false}); //设置ajax操作为同步,方便给flag赋值
var username = $("#username").val(); //获取用户名
username = $.trim(username);//去除空格
var flag; //用户名是否已经存在的标识
//判断用户名是否为空
if(username==''){
alert("用户名不能为空");
return ;
}
//判用户名是否已经存在
var url="/demo/servlet/checkUser";
var args={"username":username,"time":new Date()};
$.post(url,args,function(data){
flag = data;
})
if(flag=="yes"){ //用户名重复
alert("该用户名已存在");
return;
}
//不重复则提交表单
document.getElementById("addUser").submit();
}
</script>
</head>
<body>
<form action="/news/servlet/addUser" id="addUser">
<input type="text" id="username" name="username">
<input type="button" value="提交" οnclick="checkUser()">
</form>
</body>
</html>
checkUser.java
package demo;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class checkUser extends HttpServlet {
public checkUser() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
List<String> userNames = Arrays.asList("AAA","BBB","CCC");//假设这几个用户名已被使用
String username = request.getParameter("username");
PrintWriter out = response.getWriter();
if(userNames.contains(username)){ //返回标志判断用户名是否存在
out.print("yes"); //该用户名已存在
}
else{
out.print("no"); //该用户名不存在
}
}
public void init() throws ServletException {
// Put your code here
}
}