# 使用AJAX串接API
###### tags: `JavaScript`
2022.03.16
參考網址：https://ithelp.ithome.com.tw/articles/10226692

query：網址後面加？
params：額外撰寫data

### 1. 引入套件
* 下載套件方法
1.安裝`npm install jquery --save`
2. 導入 :
在 vue.config.js 檔案加入:

    const webpack = require('webpack')
    module.exports = {
      //引入jquery
         chainWebpack: config => {       
             config.plugin('provide').use(webpack.ProvidePlugin, [{
                  $: 'jquery',
                  jquery: 'jquery',
                  jQuery: 'jquery',
                 'window.jQuery': 'jquery'
            }])
        }
    }

* CDN方法(較不建議，當系統更新時本地端會出現錯誤)

<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>

* 下載套件安裝在專案內
可參考此筆記：https://hackmd.io/57NGTKLUTkCxYBCz00T0pA

### 2. 寫<script>抓取資料

getdata(){
    const url = '連結網址'  //有些資料要求，是直接放在網址後，用「?資料1=要求內容&資料1=要求內容」串接在網址後
    const token = '連結資料代碼'
    const vm = this; //如果用Vuecli，ajax裡要抓取資料，不能直接下this
    
    // -------- 依照後端傳遞規則視情況撰寫(有些不用) ---------
    const data = new FormData();
    data.append('資料名稱', 資料要求內容);
    //-------------------------------------------------
    
    
    $.ajax({
        type:'型態', //GET、POST...不同型態整體ajax會有不同撰寫方式
        url:url, //連結網址
        data:data, //看後端資料型態，如果是使用網址傳遞資料要求內容，這行可以不要
        dataType:'資料型態', //json...，這行無特殊要求可省略
        //--------- 如果後端資料有要求要用header 才需要打 ----------
        headers:{
            'authorization': token,
        },
        //-----------------------------------------------------
        success:function(response){
            console.log('成功');
        },
        error:function(err){
            console.log('失敗');
        }
    })

}