java網頁端資料傳輸到後端程式(Servlet 和jsp)
Servlet和jsp兩種方式
將網頁中form表單中的資料傳輸到服務端
Tomcat
首先需要下載一個Tomcat伺服器,用來發佈網站,版本可以任意選擇,在Tomcat裡面會帶有servlet的jar包
首先使用servlet
Java Servlet 是執行在 Web 伺服器或應用伺服器上的程式,它是作為來自 Web 瀏覽器或其他 HTTP 客戶端的請求和
HTTP 伺服器上的資料庫或應用程式之間的中間層。使用 Servlet,您可以收集來自網頁表單的使用者輸入,呈現來自資料庫或者其他源的記錄,還可以動態建立網頁。
先利用eclipse建立一個網站,用別的開發工具也是一樣的,建立網站是需要配置Tomcat伺服器,以便網站匯入了servlet的包,並且可以釋出,如圖
新建web工程
配置Tomcat
建立完之後再web專案的Webcontent裡面編輯你需要新增的網頁內容
這裡我建立了一個index的html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="MyServlet" method="post">
<input id="name" name="name" type="text">
<input id="pwd"name="pwd" type="text">
<input name="submit" type="submit" value="提交">
</form>
</body>
</html>
建立一個form表單,表單中action表示的是用哪個servlet來處理提交的資訊,
method則表示的資料的傳輸方式,分為兩種,一種是get一種是post
下面就開始建立Servlet,在編寫java程式碼的裡面建好包,並建立一個類,這個類需要繼承HttpServlet
從網頁讀取資料
在HttpServlet中有兩個方法,doget 和dopost,這兩個方法就是用來接收網頁端資料和向網頁端輸出資料的
在這裡我們使用dopost的方法,在dopost中有個引數HttpServletRequest request我們可以通過這個引數獲取網頁的傳輸內容
HttpServletRequest 引數中有getParameter這個方法能夠獲取網頁的表單物件
String name = request.getParameter(“name”);
這是利用一個字串來接收一個name屬性為name的表單內的字串資料
表單中的input都可以定義一個name,來被服務單獲取,同理可獲得pwd中的資料
向網頁輸出資料
輸出資料則是依賴一個PrintWriter 的物件,此物件有個write 和print方法都可以向網頁中輸出資料,具體使用:
PrintWriter out = response.getWriter();
out.println(“字串”);
在字串的位置你也可以改成html程式碼這樣,就能直接打印出來一個網頁
服務端具體程式碼如下:
response.setContentType(“text/html;charset=utf-8”);
如果想輸出網頁的話要加入text/html這句話不然輸出的就會是程式碼而不是網頁
如果想從網頁中獲取中文字元則需要設定utf-8的格式不然會出現亂碼
package com.yd;
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;
public class Yd extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
/** 設定響應頭允許ajax跨域訪問 **/
response.setHeader("Access-Control-Allow-Origin", "*");
/* 星號表示所有的異域請求都可以接受, */
response.setHeader("Access-Control-Allow-Methods", "GET,POST");
/**
* 接收json
*/
String name = request.getParameter("name");
String pwd = request.getParameter("pwd");
System.out.println(name);
System.out.println(pwd);
/**
* 返回json
*/
PrintWriter out = response.getWriter();
String title = "成果";
String docType = "<!DOCTYPE html> \n";
out.println(
docType + "<html>\n" + "<head><title>" + title + "</title></head>\n" + "<body bgcolor=\"#f0f0f0\">\n"
+ "<h1 align=\"center\">" + title + "</h1>\n" + "登陸成功\r\n" + "</body>\r\n" + "</html>");
out.close();
}
}
3、配置Web.Xml檔案、
建完servlet之後還需要在web.xml中配置一下,讓網頁和服務單都能找到該servlet
web.xml檔案也在WebContent/Web-INF裡面如果沒有則需要你手動自己建一個
web.xml程式碼如下
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<display-name>My</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>MyServlet </servlet-name>
<servlet-class>com.yd.MyServlet </servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyServlet </servlet-name>
<url-pattern>/MyServlet </url-pattern>
</servlet-mapping>
</web-app>
<servlet> 中的<servlet-name>是與
<servlet-mapping>中的<servlet-name>對應的隨便取什麼名字都行,但是兩個name需要一樣
<servlet-class>com.yd.MyServlet </servlet-class>
這表示的是你要使用的Servlet所在的路徑,需要寫包名,
<url-pattern>/MyServlet </url-pattern>
其中的/MyServlet表示的是在網頁中訪問servlet時用到的URL地址,一定要加/ 名字隨意
<welcome-file>index.html</welcome-file>
表示的是當只有前面部分的URL時訪問的頁面
例如你需要訪問http://localhost/My/index.html時如果你在位址列直接輸入http://localhost/My則會直接訪問你再這一項中設計的歡迎頁面
到此就配置完成了,只需要執行釋出到Tomcat上就能訪問了
可從位址列中看到URL進入了Servlet中,而且下方也讀取到了輸入框中的資料
著重提醒,html檔案一定要放在WebContent下面而不是WebContent中的Web-INF下面,不然會一直出錯,,血的教訓啊。。。
使用jsp原理也差不多,jsp在本質上就是servlet
所以如果用jsp設計則不需要再xml檔案中進行配置只需要將html中表單裡的action寫為你自己的jsp檔案就行,然後在jsp中和servlet如出一轍
以下是程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="My.jsp" method="post">
<input id="name" name="name" type="text">
<input id="pwd"name="pwd" type="text">
<input name="submit" type="submit" value="提交">
</form>
</body>
</html>
jsp中的程式碼,
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
登陸成功
</body>
</html>
<%
String name = request.getParameter("name");
String pwd = request.getParameter("pwd");
System.out.println(name+" "+pwd);
%>
最終會看到一樣的效果只不過位址列中的servlet程式設計了jsp檔案