前后端互動的計算器
繼上一篇配置Servlet，如果沒配置好，可看我上一篇文章，
當然，還必須要有Tomcat，沒有可去官網自行下載，（Tomcat做的就是將本地資源可以上傳至前端進行訪問），注意：Tomcat的路徑必須要知道，且必須是全英文！！！！
第一步：使當前專案系結Tomcat；
下一步的OK別急著點，先做緊接著的操作，OK最后點，我圖片畫的時候有點問題！！！！！
選中打包好的war包，點擊ok即可配置好，
第二步：建立html檔案，在webapp上右鍵新建html檔案；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的計算器</title>
</head>
<body>
<form method="post" action="counter">
<div style="text-align:center">
<h1>計算器</h1>
<p><strong>數字:</strong><input type="number" id="n1" name="name1"></p>
<p><strong>數字:</strong><input type="number" id="n2" name="name2"></p>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
其中，post是傳參方式，counter是servlet申請的介面的路徑名，
切記input中的按鈕不再是button，而是submit，button無法完成前后端互動，
第三步：配置web.xml檔案；
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<!--用來注冊servlet介面的實作類-->
<servlet>
<servlet-name>counter</servlet-name>
<servlet-class>CounterServlet</servlet-class>
</servlet>
<!--用來注冊servlet的介面-->
<servlet-mapping>
<servlet-name>counter</servlet-name>
<url-pattern>/counter</url-pattern>
</servlet-mapping>
</web-app>
前端會在根目錄下找到counter，進而找尋servlet-name為counter（隨便取，但要和上面的servlet-name保持一致），最終找到后端實作類CounterServlet，而url-pattern處的counter（切記加斜杠）要和上面action的引數名一致，
第四步：創建CounterServlet類了；
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class CounterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
String num1=request.getParameter("name1");
String num2=request.getParameter("name2");
int end=Integer.parseInt(num1)+Integer.parseInt(num2);
PrintWriter writer = response.getWriter();
writer.println(String.format("<h1 style='color:red'>最終結果為:%d</h1>",end));
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
response.setCharacterEncoding(“utf-8”)：這一步是防止中文亂碼，所以要設定回傳的回應的編碼格式；
response.setContentType(“text/html”)：設定顯示文本，因為是html前端頁面所以是html；
String num1=request.getParameter(“name1”)：這里切記要用input標簽中的name屬性，不能用id屬性，因為后端程式是不能通過id獲取前端資訊的，
String.format()類似于C語言中的printf，只不過對于保留小數時自帶四舍五入，
一切完成之后，點擊運行；
比較簡陋，喜歡好看樣式的可以自己設定，（這是前端頁面）
點擊提交后轉為以下界面:后端回傳的計算結果，
如果程式執行后自動跳轉到如下界面：
別怕！只需在http://localhost:8082/web/之后加上html檔案名和后綴全稱便可執行成功！！！！
做的比較low，還請擔待，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271371.html
標籤：其他