前端怎么調(diào)用后端接口呢?一般來講,前端不會給后端接口,而是后端給前端接口的情況比較普遍。一些人可能不理解接口和前端開發(fā)的關(guān)系,其實(shí)不合適的接口設(shè)計(jì)會極大地影響用戶的頁面體驗(yàn)。那么今天IT培訓(xùn)網(wǎng)就和大家一起來看看。
前端如何調(diào)用后端接口?
首先,要弄清楚前端提供一個(gè)接口或者調(diào)用后臺接口,那么這個(gè)接口具體指什么?網(wǎng)上用戶上傳圖片作為頭像 這個(gè)需求需要后臺人員處理,當(dāng)用戶登錄 修改自己個(gè)人信息的時(shí)候,上傳了頭像。此時(shí),后臺處理該用戶update個(gè)人信息,將該圖片存入數(shù)據(jù)庫,一般存的都是圖片地址,string形式的數(shù)據(jù)。然后,要返回到前臺的時(shí)候,后臺人員需要對這些用戶的個(gè)人信息進(jìn)行處理,不只是頭像,還有一些別的信息。后臺通過語言編譯,生成json格式的鍵值對(一般是json 還有xml txt 等數(shù)據(jù)格式)。生成一個(gè)地址也就是url,前臺人員利用ajax,將返回的data顯示到頁面就好了。大體上來講,接口一般指的是HTTP接口,也可以說是HTTP API。接口由后端提供,前端調(diào)用后端接口以獲取后端數(shù)據(jù)。而且接口由URL和HTTP方法構(gòu)成,URL為接口的地址,HTTP方法指的是GET, PUT, DELETE等等。
前端調(diào)用后端接口無外乎六種方法,如下:
1、打開vs,創(chuàng)建空的asp.net mvc演示項(xiàng)目【W(wǎng)ebMVC】
(1)依次點(diǎn)擊【文件】->【新建】->【項(xiàng)目】;
(2)在【新建項(xiàng)目】界面選擇【W(wǎng)eb】->【ASP.NET Web 應(yīng)用程序(.NET Framework)】,輸入名稱,選擇框架至少4.5版本,點(diǎn)擊【確定】按鈕;
(3)選擇【空】->【MVC】->【確定】 ;
(4)創(chuàng)建好了項(xiàng)目。
2、在項(xiàng)目中
(1)在Controllers文件夾上點(diǎn)擊鼠標(biāo)右鍵,依次選擇【添加】->【控制器】,即可完成HomeController的創(chuàng)建;
(2)在Controller的Index方法內(nèi),點(diǎn)擊鼠標(biāo)右鍵,選擇【添加視圖】;
(3)在項(xiàng)目中添加文件夾【Content】并添加jquery源文件;
(4)在Index頁面添加jquery的引用。
3、在Index頁面中添加一個(gè)輸入文本框,一個(gè)按鈕,以及顯示結(jié)果的dom。
4、在HomeController中添加新的方法,用于接收前臺傳入的參數(shù),組裝后返回。
5、在Index頁面,添加Jquery的ajax方式,調(diào)用后臺接口,返回結(jié)果的處理代碼。
6、在vs中,按F5調(diào)試運(yùn)行結(jié)果,如下:
(1)在文本框中輸入內(nèi)容;
(2)點(diǎn)擊按鈕,調(diào)用接口,并將返回值顯示在界面;
(3)如果要提交大量數(shù)據(jù),或者敏感數(shù)據(jù),請修改ajax的type方式,這樣參數(shù)就不會在url地址欄中顯示了。
以上六步驟,教會你成功利用前端調(diào)用后端接口,不會的小伙伴們,一定要注意了,讓我們都能熟練的掌握這些技巧!






