1. 程式人生 > >java網頁端資料傳輸到後端程式(Servlet 和jsp)

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檔案

html檔案和jsp檔案都需要寫在WebContent下面,不要放在WebContent中Web-INF下面