ajax後端怎麼寫？如何實現前後端互動（程式碼範例）

下面這篇文章就來跟大家介紹如何ajax後端怎麼寫？如何實現前後端交互，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前言

#什麼是前後端銜接？為什麼這麼叫，那是因為我實在想不出另一個比較好的叫法來形容我在小白階段的前端開發時遇到的問題。

1.我們都知道，前端不只是做好網站介面、做好使用者互動設計，還要做好與後端的「溝通」。

說是這麼說，但是如何做到與後端進行溝通呢，後端對於前端來說到底是一個什麼樣的東西，雖然總是聽到，但我又應該怎樣去接觸它呢？

2.當我們的CSS技術已經爐火純青的時候，我們不再僅僅滿足於練習式的仿站，而是想真正地做到企業開發，想開發一個屬於自己的應用，或者做一個小項目，好在面試的時候有拿得出手的東西。

疑問

那麼什麼是後端呢？

因為我不是從事後端開發工作的，所以我不想多說什麼。

但是，身為前端開發工作者，你至少得會兩點，第一是做好Web的互動設計；第二是使用後端回傳的資料。

所以，後端對前端簡單來說，就是能處理資料然後將資料回傳給前端，供前端使用。

當然，前端的工作還有瀏覽器相容、Web效能優化等等這些。

那要怎麼與後端接觸呢？

這時候我們應該換個說法：向後端發送我(前端)的請求。

就我目前所知，向後端發送請求有下列幾種方法，當然了，如果你使用了其他前端開發框架，如Vue.js、React等這些，那麼還會有其他方法，不過我在這只介紹下傳統的方法。

方法

1.使用

標籤的action屬性可以向後端發送請求，這種方法在特殊的場景下會用到。

使用如下：

<form method="发送请求所使用的方法" action="向后台发送请求的url(访问的地址)">
    <input type="hidden" name="访问后台API需要传的参数" value="参数的值"/>
</form>

這種方法在這只做簡單地介紹，不是本文的主要闡述。

而且這種方法有比較多的限制，例如無法設定複雜的請求頭。

2.使用WebSocket進行通信，這是一種比較新型的方法，大家可以自行搜索，也只是簡單地調用API(使用提供的方法)。

3.fetch()方法，這也是很新的方法，但目前相容的瀏覽器有限，所以也不是很常用。

4.ajax(阿賈克斯)，這是一個很常用很方便的方法，關於ajax的介紹可以自行百度。說到ajax，就得分JavaScript的ajax和jQuery的ajax。

1）原生js的ajax是基於一個名為XMLHttpRequest的物件。喔不，應該是有關ajax的都是基於這個對象。大家可以去百度原生ajax的寫法，只要要做了解就好，因為真的很少需要寫到。

2）jQuery是一種JavaScript的封裝函式庫，封裝了許多常用簡單的方法，使用起來非常簡單，我想是每個前端開發者必會掌握的技能。所以本文主要使用jQuery封裝好的ajax。

實例

說了這麼多，終於開始進入正題了...

我們要向後端發送請求，那肯定得有後端啊，可是我不會後端，難道我還得去學習後端嗎？

所幸，這個世界有一種神奇的東西，叫做開放平台、開放API。比較有名的就是新浪開放API、豆瓣開放API、各大地圖類開放平台等等。

這種開放平台就相當於我們的後端，它給了我們開放API(url)。開放，我不說你也知道是什麼意思了。

下面直接是一段程式碼：

$.ajax({
    type: 'GET',                                                     // 请求的方式
    url: 'https://free-api.heweather.com/s6/weather/now?parameters', // 请求的地址（和风天气开放API）
    data: {                                                          // 请求所需要填的参数
        location: '中山,广东',                                        // 需要查询的城市或地区
        key: '9da*********************95bcb82f'                      // 用户认证key    },
    success: function(data) {                                        // 请求成功后，接收到data
        console.log(data); // 打印获取到的数据
                
        // 对获取到的数据稍作处理
        var basic = data.HeWeather6[0].basic;        var now = data.HeWeather6[0].now;
        console.log(basic);
        console.log(now);

    }
});

在瀏覽器上按F12，在Console欄看到的結果：

##到這裡，前後端銜接的過程就完成囉！

在這裡，我是用的開放平台是和風天氣（https://www.heweather.com），它提供了一些天氣的數據，假如使用它，我們就可以開發一款自己的天氣APP啦。

好了，我所做的介紹就到這裡了！關於前端的知識真的非常非常多，還需要大家自己主動學習掌握！

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請造訪JavaScript影片教學，jQuery影片教學，AJAX影片教學！

相關推薦：

php公益培訓影片教學

#JavaScript線上手冊

AJAX線上手冊

jQuery線上手冊

#

以上是ajax後端怎麼寫？如何實現前後端互動（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！