< 筆記 > HTML - 03 HTML 表單提交

03 HTML 表單提交

By Kevin Song

GET提交和POST提交的區別

  • 區別一
    • GET提交,提交的信息顯示在地址欄中
    • POST提交,提交的信息不顯示地址欄中
  • 區別二
    • GET提交,敏感數據信息不安全,密碼暴露無遺
    • POST提交,敏感數據安全
  • 區別三
    • GET提交,對於大數據不行,地址欄存儲體積有限
    • POST提交,可以提交大體積數據
  • 區別四
    • GET提交,把信息封裝到了請求消息的請求行中
    • POST提交,把信息封裝到了請求消息的請求體中
  • 區別五(在服務端)當中文提交到Tomcat服務器,服務器會默認用ISO8859-1進行解碼出現亂碼。用IOS8859-1進行編碼,再用指定中文碼錶解碼即可。這種方式對GET提交和POST提交都有效
    • 對於POST提交的中文,還有另一種解決方法,直接使用服務端的一個對象。
    • request對象的setCharacterEncoding方法直接設置指定的中文碼錶就可以將中文數據解析出來
    • 該方法只對請求體中的數據進行解碼

前端和服務端交互的三種方式

  1. 地址欄輸入url地址—GET請求
  2. 超鏈接—GET請求
  3. 表單—GET和POST請求

增強型校驗

增強型校驗定義:只要有一個組件內容錯誤,是無法繼續提交的只有全對纔可以提交

客戶端進行增強型校驗後,服務端也需要進行校驗
原因:
增加安全性,因爲與服務端交互方式不止表單提交一種,可以防止直接在地址欄輸入url地址暴力註冊,確保服務端只會收到正確的信息。

服務端進行增強型校驗後,客戶端也需要進行校驗
原因:
增加用戶上網體驗,每次都在服務端校驗增加了等待時間,並且增加了服務端的壓力

前端代碼:

<html>
    <head>
        <title>Kevin's Homepage</title>
    </head>
    <body>
        <form action="http://10.1.31.69:9090" method="get">
            <table border="1" bordercolor="#00ffff">
                <tr>
                    <thcolspan="2">註冊表單</th>
                </tr>
                <tr>
                    <td>用戶名稱</td>
                    <td><input type="text" name="user" value="" /></td>
                </tr>
                <tr>
                    <td>輸入密碼</td>
                    <td><input type="password" name="pwd"/></td>
                </tr>
                <tr>
                    <td>確認密碼</td>
                    <td><input type="password" name="repwd"/></td>
                </tr>
                <tr>
                    <td>選擇性別</td>
                    <td>
                    <input type="radio" name="gender" value="man" /><input type="radio" name="gender" value="woman" /></td>
                </tr>
                <tr>
                    <td>選擇技術</td>
                    <td>
                    <input type="checkbox" name="tech" value="Java"/>Java
                    <input type="checkbox" name="tech" value="C++"/>C++
                    <input type="checkbox" name="tech" value="Python"/>Python
                    </td>
                </tr>
                <tr>
                    <td>選擇國家</td>
                    <td>
                        <select name="country">
                            <option value="none">--選擇國家--</option>
                            <option value="USA">美國</option>
                            <option value="CN" selected="selected">中國</option>
                            <option value="KR">韓國</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th colspan="2">
                    <input type="reset" value="重置表單">
                    <input type="submit" value="提交表單">
                    </th>
                </tr>
            </table>
        </form>
    </body>
</html>

服務端代碼

public class RegServer {
    public static void main(String[] args) {
        ServerSocket ss = new ServerSocket(9090);
        Socket s = ss.accept();
        InputStream in = s.getInputStream();
        byte[] buf = new byte[1024];

        int len = in.read(buf);

        System.out.println(new String(buf,0,len));
        PrintWriter out = new PrintWriter(s.getOutputStream(),true);

        out.println("<font color='green' size=7>註冊成功</font>");

        s.close();
        ss.close();
    }
}

提交方式:GET
地址欄:http://10.1.31.69:9090/?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn

GET /?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Connection: Keep-Alive

提交方式:POST
地址欄:http://10.1.31.69:9090/

POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Content-Length: 68
Connection: Keep-Alive
Cache-Control: no-cache

user=hahah&psw=8989&repsw=8989&sex=nv&tech=html&tech=css&country=usa
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章