網頁中如何收集使用者資料?

來源:酷知科普網 1.79W

在做網頁開發時,很多時候我們需要和使用者進行互動。比如收集使用者的愛好資訊,如何實現這個功能?其實很簡單,我們利用form表單,就能把使用者的資訊提交到伺服器了,下面來看下怎麼提交。

操作方法

(01)首先,我們需要在html裡新增一個form控制元件,併為form控制元件寫上action屬性,該屬性會告訴form提交到伺服器的哪一個地址裡的。程式碼如圖

網頁中如何收集使用者資料?

(02)然後根據自己的需要收集的資訊,新增一些控制元件,比如新增input,select等html控制元件來收集使用者的名字,年齡,運動愛好等資訊。程式碼如圖(要注意的是每個控制元件要新增一個name屬性,我們後臺需要通過這個name來獲取值)

網頁中如何收集使用者資料? 第2張

(03)然後新增一個submit按鈕,這個提交按鈕放在form裡時,只要點選了,就會自動把form表單提交到伺服器的。

網頁中如何收集使用者資料? 第3張

(04)到後臺的邏輯了,關鍵是怎麼獲取到客戶端提交過來的表單資料。這裡以php程式碼為例子,其他語言的也差不多,可參考實現。在php裡有一個全域性性的陣列變數,_POST變數,可以獲取到客戶端post過來的資料。(我們上面的form表單是用post方法提交過來的)。比如年齡欄位的獲取,我們可以通過這樣來獲取, $age = $_POST[‘age']; 這裡的age字元就是表單年齡控制元件的name的値。

網頁中如何收集使用者資料? 第4張

(05)瞭解到了上面的獲取方法,我們把表單裡的三個控制元件的資料都獲取到,然後簡單處理,直接輸出到頁面裡,來看下是否能正確獲取到。程式碼如圖。

網頁中如何收集使用者資料? 第5張

(06)執行頁面,我們輸入自己的資訊,點選提交按鈕。

網頁中如何收集使用者資料? 第6張

(07)提交到伺服器後,伺服器收集到表單的資料,整理了一下後直接輸出頁面,我們可以看到收集到的資料是完全正確的。

網頁中如何收集使用者資料? 第7張
熱門標籤