Form表單提交到Servlet處理的正確方法
只適合初學Web的小白哈,大神忽略即可
(1)首先新建一個Dynamic Web Project專案,我的專案名叫MyWebTest,(2)在WebContent->WEN-INF資料夾下新建一個web.xml配置檔案,檔案內容如下:
<?xml version="1.0" encoding="UTF-8"?>
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"?>
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);
}
}