axios-config模式

axios是ajax的庫，可以去官網下載axios的js檔案，呼叫即可

<h2>axios的config模式</h2>
<button class="get">get請求</button>
<button class="post">post請求</button>
<script src="./lib/axios.js"></script>
<script>
  // 1. 測試get請求
  // 機器人聊天介面：http://ajax-api.itheima.net/api/robot
 

  document.querySelector(`.get`).onclick = () => {
    // console.log(1)
    axios({
      method:`get`,
      url : `http://ajax-api.itheima.net/api/news`,
      // 請求引數
      params : {
        spoken:`你吃飯了嗎`
      }
    }).then(res => {
      console.log(`res`,res)})
  }
  // 2.測試post請求 ：http://ajax-api.itheima.net/api/login
 

  // 賬號：admin 密碼：123456
  document.querySelector(`.post`).onclick = () => {
    axios({
      method: `post`,
      url: `http://ajax-api.itheima.net/api/login`,
      data : {
        username : `admin`,
        password : `123456`
      }
    }).then(res => {
      console.log(res)
    })
  }
</script>

表單ajax提交

<h2>ajax+form</h2>
<!--action 提交的介面地址
  method 提交的方法-->
<form action="http://ajax-api.itheima.net/api/data" method="post">
  <!-- name 提交到伺服器資料的 key -->
  <input
          class="username"
          name="username"
          type="text"
          placeholder="請輸入使用者名稱"
  />
  <br />
  <input
          class="food"
          name="food"
          type="text"
          placeholder="請輸入喜歡的食物"
  />
  <br />
  <input
          class="sign"
          name="sign"
          type="textarea"
          placeholder="請輸入個性簽名"
  />
  <br />
  <input
          class="male"
          name="male"
          type="textarea"
          placeholder="請輸入性別"
  />
  <br />
  <button type="submit">提交</button>
</form>
<script src="./lib/axios.js"></script>
<script>
  // http://ajax-api.itheima.net/api/data
  document.querySelector(`form`).addEventListener(`submit`,(e) => {
    // console.log(1)
    e.preventDefault() //阻止預設行為
    //ajax
    axios({
      method : `post`,
      url : `http://ajax-api.itheima.net/api/data`,
      data : {
        username : document.querySelector(`.username`).value,
        // password : ``,
        food : document.querySelector(`.food`).value,
        sign : document.querySelector(`.sign`).value,
        male : document.querySelector(`.male`).value,
      }
    }).then(res => {
      console.log(res)})
  })
</script>

form-serialize外掛

可以獲取表單中所有資料，並且可以轉換為JSON或者物件屬性，我們集中給Ajax傳入引數

<h2>ajax+form-外掛</h2>
<!--
  action 提交的介面地址
  method 提交的方法
 -->
<form action="http://ajax-api.itheima.net/api/data" method="post">
  <!-- name 提交到伺服器資料的 key -->
  <input class="username" name="username" type="text" placeholder="請輸入使用者名稱" />
  <br />
  <input class="food" name="food" type="text" placeholder="請輸入喜歡的食物" />
  <br />
  <input class="sign" name="sign" type="textarea" placeholder="請輸入個性簽名" />
  <br />
  <input class="male" name="male" type="textarea" placeholder="請輸入性別" />
  <br />
  <input class="male" name="hobby" type="textarea" placeholder="請輸入愛好" />
  <br />
  <input class="male" name="age" type="textarea" placeholder="請輸入年齡" />
  <br />
  <button type="submit">提交</button>
</form>
<script src="./lib/axios.js"></script>
<!-- 1. 匯入外掛 -->
<script src="./lib/form-serialize.js"></script>
<script>
  // http://ajax-api.itheima.net/api/data
  document.querySelector(`form`).onsubmit = (e) => {
    e.preventDefault() //阻止預設提交事件
    // hash:false //鍵值對，字串
    console.log(serialize(document.querySelector(`form`),{hash:true}))
    let data = serialize(document.querySelector(`form`),{hash:true}) //獲取表單的每個元素
    console.log(data)
    axios({
      method:`post`,
      url : `http://ajax-api.itheima.net/api/data`,
      data,
    }).then(res => {
      console.log(res)})
  }
</script>

FromData屬性的基本資訊

 FromData是瀏覽器提供的內建物件，是一個建構函式，需要new出來，是以鍵值對的形式儲存資料的，能夠結合Ajax進行資料互動

新增資料以後通過例項化看不到新增的資料，需要使用get（不是Ajax的方式，是他自己的方式，例項化物件.get（對應的鍵））方式才可以看到

建立方法：通過new關鍵字例項化，.append(key，value)新增資料，.get（key）獲取對應的值。可以用來儲存檔案

<script>
    let data = new FormData()
    console.log(data)
    // 往例項化物件新增
    data.append(`uname`,`rose`)  //新增資料
    console.log(data)
    // 例項化物件.get(`鍵名`)
    console.log(data.get(`uname`))  //獲取對應key的值
</script>

FromData-type = file語法補充

是吧img圖片往後端傳遞的

<script>
    const input = document.querySelector(`[type = "file"]`)
    input.onchange = (e) => {
        console.log(e)
        // 後續把相關資訊傳給後端
        console.log(e.target.files[0])
    }
</script>

頭像上傳格式

<h2>直接通過FormData</h2>
<!-- e.target.files[0] -->
<!-- 推薦使用者選擇 圖片 -->
<input type="file" accept="image/*" />
<img src="" alt="" />
<!-- 點選按鈕 上傳使用者選擇的圖片 -->
<button>上傳</button>
<script src="./lib/axios.js"></script>

<script>
  // 1.點選按鈕上傳圖片
  document.querySelector(`button`).onclick = () => {
    // console.log(1)
    const img = document.querySelector(`input`).files[0]
    // console.log(img)
    // 傳給後端一定要使用FromData格式
    const data = new FormData()  //例項化FromData
    data.append(`avatar`,img)  //鍵名是需要根據引數來更改的
    console.log(data.get(`avatar`))
    // 上傳頭像引數
    axios({
      url:`http://ajax-api.itheima.net/api/file`,
      method : `post`,
      data : data
    }).then(res => {
      // console.log(res)
      console.log(res.data.data.url)
      document.querySelector(`img`).src = res.data.data.url
    })
  }
</script>

使用不同的資料格式上傳頭像

<h2>form-data</h2>
<input class="ipt" type="file" accept="image/*" />
<h2>application/json</h2>
<button class="json">測試登入介面</button>
<h2>urlencoded</h2>
<button class="urlencoded">測試urlencoded格式</button>
<script src="./lib/axios.js"></script>
<script>
    // http://ajax-api.itheima.net/api/file
    // 1.測試formData
    document.querySelector('.ipt').onchange = function (e) {
        // 呼叫頭像上傳介面 提交圖片
        const data = new FormData()
        data.append('avatar', e.target.files[0])
        axios({
            url: 'http://ajax-api.itheima.net/api/file',
            method: 'post',
            data: data,
        }).then((res) => {
            console.log('res:', res)
        })
    }
    // 2.測試application/json
    document.querySelector('.json').onclick = function () {
        axios
            .post('http://ajax-api.itheima.net/api/login', {
                username: 'admin',
                password: '123456',
            })
            .then((res) => {
                console.log('res:', res)
            })
    }
    // 3.測試 application/x-www-form-urlencoded
    document.querySelector('.urlencoded').onclick = function () {
        axios({
            url: 'http://ajax-api.itheima.net/api/data',
            method: 'post',
            data: 'name=jack&age=18&friend=rose',
        }).then((res) => {
            console.log('res:', res)
        })
    }
</script>

axios基地址

    <h2>axios的config模式</h2>
    <button class="get">get請求</button>
    <button class="post">post請求</button>
    <script src="./lib/axios.js"></script>
    <script>
      // 我要設定基地址
      axios.defaults.baseURL = `http://ajax-api.itheima.net`
              // 1. 測試get請求
      document.querySelector('.get').onclick = function () {
        axios({
          // get請求傳遞引數-->拼接到url中
          params: {
            spoken: '好無聊呀!',
          },
          // 方法 預設就是get
          // method: 'get',
          // 地址
          url: '/api/robot',
        }).then((res) => {
          console.log('res:', res)
        })
      }

      // 2.測試post請求
      document.querySelector('.post').onclick = function () {
        axios({
          url: '/api/login',
          method: 'post',
          data: {
            username: 'admin',
            password: '123456',
          },
        }).then((res) => {
          console.log('res:', res)
        })
      }
    </script>