從頁面送出表單資料的方法之(一)
先說下開發中我使用的主要web利器:
Bootstrap
AdminLTE
Jquery
vue.js
underscore.js
簡介
利用表單給伺服器送出資料是網站最常見的操作之一，主要用到的http請求也就是Get和Post兩種方法。這兩種方法都可以用來向伺服器送出資料。這裡我們已【查詢】或者【搜尋】操作為例扒一扒常用的送出表單資料的方法。
方法一:原始方法
說是最原始的方法是因為是用純粹的html來送出資料，不涉及到js等内容。
1.網頁端
看個最簡單的栗子:
.... ......
定義好了表單的輸入框，利用
元素的method屬性訓示用get方法送出本表單的資料；用元素的type屬性訓示點選這個按鈕來進行送出，value屬性訓示按鈕button上的文本,自定義；用元素的name屬性用于伺服器端擷取對應的參數，值自定義。
點選送出之後，html會自動在到伺服器的url位址中加入你所填的資料作為參數，即自動完成url位址的拼接并用get方法向伺服器請求資料。
url位址的形式：http://www.ip:port/xxxx?user=xxx&password=xxxx ，如果有多個參數就一直在url後邊加&就OK。
2.伺服器端
當然了，伺服器端已經寫好了用于處理這個get請求的class。首先用get_argument("name")來擷取url位址中的各個參數，這裡的name是元素的name屬性對應的值，get_argument這個方法專門用來擷取get請求的url位址中附帶的參數。
然後用得到的參數準備好需要的資料在回傳到前端的頁面上并顯示出來：再提一點，這種方式我們一般稱為純後端的渲染方式，準備資料等等工作都在伺服器端完成，準備好之後直接丢過來給前端顯示。
如果查詢出來的結果比較多需要分頁的話，那麼分頁所需要的參數也是這個時候都準備好了再丢給頁面。
3.弊端
這裡的弊端是我認為不太友善或者比較繁瑣的地方，總結出來有2點：
(1)查詢條件的回顯
很明顯如果我要查詢或者搜尋的話，我輸入查詢條件點選對應的按鈕後，結果出來的同時我已經輸入的查詢條件也應該在的，這樣我才能合理的進行下一次查詢。但是由于直接用html原生表單送出資料的話每一次查詢都會重新整理整個頁面，是以必須在html中對不同的輸入做不同的處理才能達到查詢條件回顯的目的。
如圖：查詢條件有和日期類型，所有的類型和所有的輸入框都要做回顯處理，比較繁瑣和傷人
(2)頁面的重新整理
上面已經提到，不管查詢條件如何，隻要你點了按鈕，真個頁面都會重新整理。重新整理帶來的一點就是頁面閃一下用于重新加載，如果此時網速恰好不給力就B了。一般結果比較多肯定是分頁的，換頁的時候帶來的也是整個頁面的重新整理。不管是【上一頁】還是【下一頁】，必須重新整理沒商量。
當然了，這個并不是不可接受的，因人而異吧。