前后端互動計算器
在做這個之前,首先得創建一個servlet專案,之前博客已做過介紹,這里直接開始
第一步
- 創建一個html檔案
這里注意要在webapp目錄下創建
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的計算器</title>
</head>
<body>
<form method="get" action="calc">
<div style="text-align: center">
<h1>計算器</h1>
數字1:<input id="n1" name="number1" type="number" ><p></p>
數字2:<input id="n2" name="number2" type="number" ><p></p>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
注意事項:
- 這里整個html檔案是一個form表單
- 提交鍵型別是"submit",不再是"button",button和后端連接不起來
第二步
- 創建.java檔案,寫后端代碼
創建程序之前已經展示過,這里直接上代碼
直接五步蛇操作
- 重寫doGet,doPost方法,直接在post里面呼叫get
- 設定編碼格式
- 設定回傳型別
- 接收前端資料
- 給前端回傳結果
注意事項
- 設定編碼格式的時候：大小寫不敏感，UTF-8和utf-8都是可以的
- 設定回傳型別的時候共有四種：text/html，text/css，application/javascript，image/png
- 設定編碼格式和回傳型別要在獲得輸出流(getWriter())之前
- 在接收前端資料時用到的是name,不是id
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 calculator extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.設定編碼格式
resp.setCharacterEncoding("utf-8");
//2.設定回傳型別
resp.setContentType("text/html");
//3.接收前端資料
int num1=Integer.parseInt(req.getParameter("number1"));
int num2=Integer.parseInt(req.getParameter("number2"));
int total=num1+num2;
//4.給前端回傳結果
PrintWriter printWriter=resp.getWriter();
printWriter.println(String.format("<h1>計算結果為:%d</h1>",total));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
}
第三步
- 配置路由(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>long</servlet-name>
<!-- 和寫的java檔案名必須一致(全包名)-->
<servlet-class>calculator</servlet-class>
</servlet>
<!-- 用來注冊sverlet的介面-->
<servlet-mapping>
<!-- 和上面的name必須一致-->
<servlet-name>long</servlet-name>
<!--在Tomcat上部署時訪問的url (最好全小寫)-->
<url-pattern>/calc</url-pattern>
</servlet-mapping>
</web-app>
第四步
- 在idea里面配置Tomcat
選擇第一個war包,點擊OK
點擊OK,配置完成
這樣子就配置成功了
全部操作完成之后,直接點擊運行即可
稍等片刻,會彈出瀏覽器如下界面
然后在url后添加html檔案的名字和后綴就可以訪問到了
點擊提交之后,會跳轉到另一個頁面
這樣子已經成功的進行了一次前后端互動
這是頁面整體提交,頁面部分提交功能會在后續更新！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271364.html
標籤：其他
上一篇：顏色切換的問題咨詢
下一篇：前端——節流、防抖（通俗易懂）