Form表单提交到Servlet处理的正确方法
只适合初学Web的小白哈，大神忽略即可
（1）首先新建一个Dynamic Web Project项目，我的项目名叫MyWebTest，（2）在WebContent->WEN-INF文件夹下新建一个web.xml配置文件，文件内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0"
metadata-complete="true">
<servlet>
<servlet-name>RegisterServlet</servlet-name>
<servlet-class>com.myWebTest.servlet.RegisterServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegisterServlet</servlet-name>
<url-pattern>/RegisterServlet</url-pattern>
</servlet-mapping>
</web-app>
其中<servlet-name>RegisterServlet</servlet-name>，表示你给这个servlet起的名字，<servlet-class>com.myWebTest.servlet.RegisterServlet</servlet-class>，是你起的名字对应的Servlet类，RegisterServlet是你在com.myWebTest.servlet包名下新建的Java 类，<servlet-mapping>中的 <servlet-name>RegisterServlet</servlet-name>要和上面起的名字一样， <url-pattern>/RegisterServlet</url-pattern>，这个/RegisterServlet就是你在表单的action要用到的url，
（3）在WebContent目录下新建一个index.jsp文件，下面列出index.jsp的表单的代码：
<form method="post" action="/MyWebTest/RegisterServlet">
</form>
上面的代码就可以把表单提交给RegisterServlet这个类处理，action由两部分构成，第一部分是项目的名字，MyWebTest，特别不能少了这个，第二部分是在web.xml中的url-pattern中指定。
（4）错误总结：如果在表单中的action中少了第一部分，也就是项目的名字，那么浏览器会提示找不到请求的url，返回的404。
（5）下面是使用ajax提交请求到RegisterServlet处理的完整代码：
----web.xml中代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0"
metadata-complete="true">
<servlet>
<servlet-name>RegisterServlet</servlet-name>
<servlet-class>com.myWebTest.servlet.RegisterServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegisterServlet</servlet-name>
<url-pattern>/RegisterServlet</url-pattern>
</servlet-mapping>
</web-app>
---index.jsp中代码
<!DOCTYPE html>
<html>
<head>
<title>register page</title>
<!--试着把css单独做一个文件存放在Web-INF的某个文件夹下，看看用什么样的方式可以正确的引用该css文件-->
<style>
*{
margin:0px;
padding: 0px;
}
#main{
margin:0 auto;
font-size:14px;
color:#000;
width:100%;
}
div label{
display: inline-block;
width:180px;
}
div input{
display: inline-block;
border:2px solid #blue;
width:200px;
font-weight:bold;
color: #000;
}
div{
margin:2px;
}
</style>
</head>
<body>
<form>
<div id="main">
<div>
<label for="username">UserName:</label>
<input type="text" name="username" id="username" onblur="validateUserName();">
<span id="userSpan"></span>
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<span id="passwordSpan"></span>
</div>
<div>
<label for="rePassword">Repeat Password:</label>
<input type="password" name="rePassword" id="rePassword" onblur="validatePassword();">
<span id="rePasswordSpan"></span>
</div>
<div>
<input type="submit" name="SignIn" value="Sign In">
</div>
</div>
</form>
<script>
function validatePassword(){
var rePassword=document.getElementById("rePassword");
var password=document.getElementById("password");
if(rePassword.value===password.value){
//passwords are the same,you can do something here
}else{
//passwords are not equal,you also can do something here
alert("passwords are not the same!");
}
}
function validateUserName(){ //validate whether the username is exit
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
console.log(1);
if(xhr.readyState===4){
console.log(4);
if(xhr.status===200){
console.log(200);
alert(xhr.responseText);
}else{
console.log(404);
alert("validate username error!");
}
}
};
//xhr.open("get","/MyWebTest/RegisterServlet?username="+document.getElementById("username").value,true);
//xhr.send(null);
//if you use the get method,the parameters you transport to server must be in the open function,and the send must be null
xhr.open("post","/MyWebTest/RegisterServlet",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("username="+document.getElementById("username").value);
}
</script>
</body>
</html>
---RegisterServlet.java中代码，在com.myWebTest.servlet包名下
package com.myWebTest.servlet;
import java.io.Console;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@SuppressWarnings("serial")
public class RegisterServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
String username=request.getParameter("username");
PrintWriter writer=response.getWriter();
HttpSession session=request.getSession();
Integer count=(Integer)session.getAttribute("count");
if(count==null){
count=0;
}
session.setAttribute("count", ++count);
if(username != null&&username.equals("mbj")){
writer.write("username is exit you visit "+count+" times");
}else{
writer.write("username is not exit you visit "+count+" times");
}
writer.close();
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
this.doGet(request, response);
}
}