📌 相关文章

📜 Servlet – 表单

📅 最后修改于: 2022-05-13 01:55:20.991000 🧑 作者: Mango

Servlet – 表单

网页是标签、文本框、复选框、选项、图像等许多输入元素的组合，可以通过使用Java servlet 将所有输入元素包含在服务器端的“HTML FORM”中来准备.通常，HTML 表单通过这些输入元素从用户那里收集数据，并让我们查看如何使用 HTTP GET/POST 方法将它们发送到服务器端。

流动：

请求将从 HTML 表单发送
它将作为Java servlet 端的GET/POST方法发送
响应将从 servlet 作为 HTML 表单提供

需要知道以下标签来处理流程

Tag Name	Usage
	To create a form in an HTML page and it encloses all the input elements.
	To create a text box or password or submit etc.,
	To create dropdown
</td><td>To create a textarea</td></tr></tbody></table></figure></p><p>除了表单标签，我们还必须将方法指定为“GET”或“POST”。通常敏感数据必须作为“POST”传递，因为在 URL 中，参数不作为查询参数发送。因此，对于发送“密码”等敏感信息，“发布”方法是一种不错的方法。而且</p><ul><li>在“Post”方法中，我们可以传递许多参数。</li><li>发布方法未添加书签</li><li>不可能保留在浏览器历史记录中，也不能被缓存，因此更安全</li></ul><p>“POST”方法用于创建或更新资源</p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace">POST /<formname.html> HTTP/1.1 <!-- It can be a jsp or any frontend application --> HOST : <Your ipaddress or host name> param1=value1¶m2=value2</code></pre></div><p>如果我们只传递有限的参数，“Get”方法最适合，而且由于参数是在外面看到的，它不太适合发送敏感参数</p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace">GET /<forname.html>?param1=value1¶m2=value2 <!-- It can be a jsp or any frontend application --></code></pre></div><ul><li> “获取”方法可以被缓存、添加书签并保留在历史记录中</li><li>不适合发送敏感信息，也有长度限制</li><li>它通常用于检索某一组数据。</li></ul><p>此外，除了 form 标签，我们还需要设置 action 标签。它将包含“servlet 的 URL” </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace">1. name method=”GET/POST”: Used to send the form data as an HTTP POST/GET request to the server. Generally, form submission containing sensitive data should be done in HTTP POST method. 2. action=”URL of the servlet”: Used to specify relative URL of the servlet and it is responsible for collecting form data and process accordingly.</code></pre></div><p>表单数据的示例片段；</p><div class="noIdeBtnDiv"><div><h5 class="code">HTML</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><form name="<name of the form>" method="get/post" action="<formServlet>"> EmailId: <input type="text" name="emailID"/> <br/> Password: <input type="password" name="yourPassword"/> <br/> <input type="submit" value="NEXT" /> </form></code></pre></div><br><hr><h5 class="code">HTML</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Registration Application</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif;} form {border: 3px solid #f1f1f1;} input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } .cancelbutton { width: auto; padding: 10px 18px; background-color: #f44336; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } .seldiv { background: #04AA6D; height: 50px; width:200px; border-radius: 15px; padding:20px; font-size:22px; color:#fff; } .optiondiv { background: #04AA6D; height: 120px; width:400px; border-radius: 15px; padding:20px; font-size:15px; color:#fff; } @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbutton { width: 100%; } } </style> <script type="text/javascript"> function ValidateEmail(emailId) { var mailformat = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/; if(emailId.value.match(mailformat)) { return true; } else { alert("You have entered an invalid email address!"); document.getElementById('yourEmailID').focus(); return false; } } </script> </head> <body> <form action="registerServlet" method="post" onclick="ValidateEmail(document.getElementById('yourEmailID'))"> <div class="container"> <label for="username"><b>Email</b></label> <input type="text" placeholder="Please enter your email" name="yourEmailID" id = "yourEmailID" required> <label for="user"><b>User Name</b></label> <input type="text" placeholder="Please enter your username" name="userName" id = "userName" required> <label for="password"><b>Password</b></label> <input type="password" placeholder="Please enter Password" name="yourPassword" id="yourPassword" required> <div class="seldiv"> <label>Gender: </label> <select name = "gender" id="gender"> <option value="male">MALE</option> <option value="female">FEMALE</option> </select> </div> <br> <div class="optiondiv"> <p>Please select your favorite language:</p> <input type="radio" id="java" name="favoriteLanguage" value="JAVA"> <label for="java">JAVA</label><br> <input type="radio" id="python" name="favoriteLanguage" value="PYTHON"> <label for="python">PYTHON</label><br> <input type="radio" id="ruby" name="favoriteLanguage" value="RUBY"> <label for="ruby">RUBY</label> </div> <button type="submit">Register</button> <label> <input type="checkbox" checked="checked" name="rememberme"> Remember me </label> </div> </form> </body> </html></code></pre></div><br><hr><h5 class="code">Java</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace">import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; @WebServlet("/registerServlet") public class RegisterServlet extends HttpServlet { private static final long serialVersionUID = 1L; public RegisterServlet() { super(); // TODO Auto-generated constructor stub } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // We can able to get the form data by means of the below ways. // Form arguments should be matched and then only they are recognised String userName = request.getParameter("userName"); String yourEmailID = request.getParameter("yourEmailID"); String yourPassword = request.getParameter("yourPassword"); String gender = request.getParameter("gender"); String favoriteLanguage = request.getParameter("favoriteLanguage"); System.out.println("gender.." + gender); System.out.println("favoriteLanguage.." + favoriteLanguage); // Here the business validations goes. As a sample, // we can check against a hardcoded value or pass the // values into a database which can be available in local/remote db // For easier way, let us check against a hardcoded value if (userName != null && yourEmailID != null && yourPassword != null ) { // We can redirect the page to a welcome page // Need to pass the values in session in order // to carry forward that one to next pages HttpSession httpSession = request.getSession(); httpSession.setAttribute("emailId", yourEmailID); httpSession.setAttribute("gender", gender); httpSession.setAttribute("favoriteLanguage", favoriteLanguage); request.getRequestDispatcher("welcome.jsp").forward(request, response); } } }</code></pre></div><br><hr><h5 class="code">HTML</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <html> <head> </head> <body> <% String gender = (String)session.getAttribute("gender"); String genderTitle = null; if (gender != null && gender.equalsIgnoreCase("female")) { genderTitle = "Ms/Mrs."; } else { genderTitle = "Mr."; } %> Welcome <%= genderTitle %> <%=session.getAttribute("emailId") %> <br> Your Resume has been added under <%= session.getAttribute("favoriteLanguage") %> POOL </body> </html></code></pre></div><br><hr></div></div><p>我们可以通过 CSS（Cascading StyleSheet）美化表单，也可以通过 Javascript 验证表单。客户端验证在 javascript 中处理。让我们为示例登录表单执行此操作。由于我们需要处理验证，我们可以通过 JSP 文件获取输入</p><p><strong>注册.jsp</strong></p><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle"> HTML </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace"><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Registration Application</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif;} form {border: 3px solid #f1f1f1;} input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } .cancelbutton { width: auto; padding: 10px 18px; background-color: #f44336; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } .seldiv { background: #04AA6D; height: 50px; width:200px; border-radius: 15px; padding:20px; font-size:22px; color:#fff; } .optiondiv { background: #04AA6D; height: 120px; width:400px; border-radius: 15px; padding:20px; font-size:15px; color:#fff; } @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbutton { width: 100%; } } </style> <script type="text/javascript"> function ValidateEmail(emailId) { var mailformat = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/; if(emailId.value.match(mailformat)) { return true; } else { alert("You have entered an invalid email address!"); document.getElementById('yourEmailID').focus(); return false; } } </script> </head> <body> <form action="registerServlet" method="post" onclick="ValidateEmail(document.getElementById('yourEmailID'))"> <div class="container"> <label for="username"><b>Email</b></label> <input type="text" placeholder="Please enter your email" name="yourEmailID" id = "yourEmailID" required> <label for="user"><b>User Name</b></label> <input type="text" placeholder="Please enter your username" name="userName" id = "userName" required> <label for="password"><b>Password</b></label> <input type="password" placeholder="Please enter Password" name="yourPassword" id="yourPassword" required> <div class="seldiv"> <label>Gender: </label> <select name = "gender" id="gender"> <option value="male">MALE</option> <option value="female">FEMALE</option> </select> </div> <br> <div class="optiondiv"> <p>Please select your favorite language:</p> <input type="radio" id="java" name="favoriteLanguage" value="JAVA"> <label for="java">JAVA</label><br> <input type="radio" id="python" name="favoriteLanguage" value="PYTHON"> <label for="python">PYTHON</label><br> <input type="radio" id="ruby" name="favoriteLanguage" value="RUBY"> <label for="ruby">RUBY</label> </div> <button type="submit">Register</button> <label> <input type="checkbox" checked="checked" name="rememberme"> Remember me </label> </div> </form> </body> </html> </code></pre></div></div></div></div><p>在上面的代码中</p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace"><!-- This will produce a dropdown containing MALE and FEMALE values <label>Gender: </label> <select name = "gender" id="gender"> <option value="male">MALE</option> <option value="female">FEMALE</option> </select></code></pre></div><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace"><!-- This will produce different options containing JAVA/PYTHON/RUBY as favorite languages --> <p>Please select your favorite language:</p> <input type="radio" id="java" name="favoriteLanguage" value="JAVA"> <label for="java">JAVA</label><br> <input type="radio" id="python" name="favoriteLanguage" value="PYTHON"> <label for="python">PYTHON</label><br> <input type="radio" id="ruby" name="favoriteLanguage" value="RUBY"> <label for="ruby">RUBY</label> </code></pre></div><p><strong>输出：</strong> </p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Servlet_%E2%80%93_Form_0.png" alt="输出"></p><p>前端电子邮件验证是通过 register.jsp 文件中的“ValidateEmail”方法完成的。我们可以将 CSS 在单独的填充和 javascript 中拆分为单独的文件并包含它们。 </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace"><script type="text/javascript"> function ValidateEmail(emailId) { var mailformat = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/; if(emailId.value.match(mailformat)) { return true; } else { alert("You have entered an invalid email address!"); document.getElementById('yourEmailID').focus(); return false; } } </script></code></pre></div><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Servlet_%E2%80%93_Form_1.png"></p><p>如果电子邮件 ID 格式不正确，我们将收到错误消息。前端验证结束后，表单将提交给 action 标签中提到的相应 servlet。 </p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Servlet_%E2%80%93_Form_2.png"></p><p><strong>注册Servlet。Java</strong></p><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle">Java</h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace">import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; @WebServlet("/registerServlet") public class RegisterServlet extends HttpServlet { private static final long serialVersionUID = 1L; public RegisterServlet() { super(); // TODO Auto-generated constructor stub } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // We can able to get the form data by means of the below ways. // Form arguments should be matched and then only they are recognised String userName = request.getParameter("userName"); String yourEmailID = request.getParameter("yourEmailID"); String yourPassword = request.getParameter("yourPassword"); String gender = request.getParameter("gender"); String favoriteLanguage = request.getParameter("favoriteLanguage"); System.out.println("gender.." + gender); System.out.println("favoriteLanguage.." + favoriteLanguage); // Here the business validations goes. As a sample, // we can check against a hardcoded value or pass the // values into a database which can be available in local/remote db // For easier way, let us check against a hardcoded value if (userName != null && yourEmailID != null && yourPassword != null ) { // We can redirect the page to a welcome page // Need to pass the values in session in order // to carry forward that one to next pages HttpSession httpSession = request.getSession(); httpSession.setAttribute("emailId", yourEmailID); httpSession.setAttribute("gender", gender); httpSession.setAttribute("favoriteLanguage", favoriteLanguage); request.getRequestDispatcher("welcome.jsp").forward(request, response); } } } </code></pre></div></div></div></div><p><strong>欢迎.jsp</strong></p><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle"> HTML </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace"><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <html> <head> </head> <body> <% String gender = (String)session.getAttribute("gender"); String genderTitle = null; if (gender != null && gender.equalsIgnoreCase("female")) { genderTitle = "Ms/Mrs."; } else { genderTitle = "Mr."; } %> Welcome <%= genderTitle %> <%=session.getAttribute("emailId") %> <br> Your Resume has been added under <%= session.getAttribute("favoriteLanguage") %> POOL </body> </html> </code></pre></div></div></div></div><p><strong>输出：</strong> </p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Servlet_%E2%80%93_Form_3.png" alt="输出"></p><p><strong>通过视频解释表单概念：</strong> </p><div style="width:640px" class="wp-video"><video class="wp-video-shortcode" id="video-754094-1" width="640" height="360" preload="metadata" controls><source type="video/mp4" src="https://media.geeksforgeeks.org/wp-content/uploads/20220127123137/registerform.mp4?_=1"> https://media.geeksforgeeks.org/wp-content/uploads/20220127123137/registerform.mp4</source></video></div><p>该视频还解释了“Onsubmit”和“OnClick”事件之间的区别。 </p><div style="width:640px" class="wp-video"><video class="wp-video-shortcode" id="video-754094-2" width="640" height="360" preload="metadata" controls><source type="video/mp4" src="https://media.geeksforgeeks.org/wp-content/uploads/20220127123254/registerform1.mp4?_=2"> https://media.geeksforgeeks.org/wp-content/uploads/20220127123254/registerform1.mp4</source></video></div><h3>结论</h3><p>表单被认为是从用户那里收集所需信息的输入场所。它可以存在于任何前端文件中，如 HTML/JSP 等，如果将它放在 JSP（Java服务器页面）中，我们可以轻松处理 javascript 验证。 Javascript 验证需要在客户端本身进行处理。因此 JSP 类型的页面很好。根据表单标签请求，将执行“POST”或“GET”方法，并再次将响应写回 JSP 页面。为了将表单数据从一个页面传送到另一个“会话”。</p><br></div></article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>