前端怎么調(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)用后端接口，不會的小伙伴們，一定要注意了，讓我們都能熟練的掌握這些技巧!
