首頁 > 網際網路

select下拉框如何動態獲取後台資料

2019-12-13 20:26:53

使用select下拉框動態獲取後台資料,需要使用chang事件,當下拉框選擇的內容改變的時候,使用ajax向後台傳輸需要獲得的資料型別,後台接收到請求的資料型別後,按型別要求返回相應的資料給前台,前台再將資料顯示出來。下面介紹實現此功能的過程。


1

新建一個html檔案,命名為test.html,使用此檔案實現select下拉框的選擇。在test.html頁面載入jquery.min.js庫檔案,下面將使用jquery的ajax向後台請求資料。


2

在test.html檔案編寫HTML程式碼,使用select標籤定義一個下拉選擇框,使用p標籤定義輸出資料的區域。兩個標籤元素都需要加上id屬性,方便下面通過id屬性找到該標籤物件進行操作。


3

在test.html編寫JS程式碼,通過select的id屬性獲得select物件,並繫結change事件,當select的下拉框改變選中的型別時,觸發不同的請求。


4

在JS裡通過val()方法獲得select下拉框選中的型別,再通過jquery的ajax方法向後台php檔案(handle.php)請求資料。


5



當JS中的ajax從後台成功獲得請求的資料後,在id為result的span標籤輸出返回的資料。這裡通過html()方法向span標籤寫入從後台獲得的資料。


6

編寫後台handle.php程式碼。新建一個php檔案,命名為handle.php,在檔案裡通過$_POST接收ajax傳遞過來的資料型別,通過if語句判斷資料型別,向前台返回不同的資料(為了測試方便,這裡以文字方式代表資料,在實際中,將你的資料返回即可)。


7

在瀏覽器執行test.html檔案,當select下拉框選擇不同型別時,返回不同的資料。
可見,已成功實現select下拉框選擇不同內容時,動態從後台獲得資料。

程式碼百度網路硬碟下載地址:

連結: https://pan.baidu.com/s/1OkIvUAywM-lAV7Sy9I7-bw 提取碼: ek2n




IT145.com E-mail:sddin#qq.com