1. 程式人生 > >Form表單提交到Servlet處理的正確方法

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);

}

}