iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
2

相信看到JQuery你大概也會笑了,沒錯上一篇講了Axios,這一篇是要來用JQuery的ajax方法才實作,篇幅應該會小一點,畢竟這老大哥的地位已經很久了。
其實你問說為什麼我還要寫JQ+Vue的組合,因為,JQ還是許多公司及新手的首選,在網路上資料量也很多,隨便查都可以查的到東西,我們今天就來將昨天的範例改寫一下吧!

當然在使用JQ的時候我們必須要將JQ的lib加到我們的網站中

將jquery加入到你的網頁中

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>

接著我們來改摟,

<div id="app">
  <span v-for="teacher in teachers" style="display: block;">{{ teacher.TeacherName }}({{teacher.TeacherId}}):{{teacher.TeacherTel}}</span>
  <button @click="getTeacherData">Get All Teacher</button>
</div>

app.js

"use strict";

const Student = new Vue({
  el : '#app',
  data : {
    teachers: []
  },
  methods : {
    getTeacherData: function() {
      let self = this;
      $.get("http://localhost:8080/ironSchool/teacher/", (response) =>{
        for (let i in response) {
          self.teachers.push(response[i]);
        }
      });
    },
  }
});

這是我們一般在用的jqery,使用GET的func搭配vue的用法,使用vue其實真的很方便,把response的資料直接的顯示在前端當中,不用在特別的使用Selector,用法也跟我們一般在使用的方式一樣,沒有差別。

重點來了!使用非GET/POST的func時,Jquery會先使用Options這個http method,向伺服器詢問有哪些的http method可以使用,所以如果你要使用delete這個func的時候,在beego必須先設定好才能夠,使用喔!
下面示範使用DELETE來刪除資料。
我們稍為改一下原本的code

<span>的地方加入@click="delTeacher(teacher.TeacherId)",變成下面這樣

<span v-for="teacher in teachers" style="display: block;" @click="delTeacher(teacher.TeacherId)">{{ teacher.TeacherName }}({{teacher.TeacherId}}):{{teacher.TeacherTel}}</span>

javascript我們也稍為改一下,在methods裡面新增一個delTeacher()的方法,整個Instance會變成下面這樣

const Student = new Vue({
  el : '#app',
  data : {
    teachers: []
  },
  methods : {
    getTeacherData: function() {
      let self = this;
      self.teachers = [];   //清空原本的資料
      $.get("http://localhost:8080/ironSchool/teacher/", (response) =>{
        for (let i in response) {
          self.teachers.push(response[i]);
        }
      });
    },
    delTeacher: function(tid){
      let self = this;
      $.ajax({
        url: `http://localhost:8080/ironSchool/teacher/${ tid }`,
        method: 'DELETE',
      }).done(()=>{
        self.getTeacherData();
      });
    }
  }
});

我們來測試一下,當我們點擊那一列的時候會執行刪除。
順便來看一下,network的變化吧!
test

其實不管是使用JQuery還是Axios等等的這些套件,其實內容大同小異,選擇一種你喜歡的就行摟。


減肥專欄、每日一句 (停刊中)

獨眼龍
(Pic From Pinterest)


上一篇
Day19 純、手工系列 JS(Vue Axios篇)
下一篇
Day21 古法私釀、糞扣 Go (BeeGo Framework 練習Header與ErrorHandler)
系列文
Go!從無到打造最佳行動網站30

1 則留言

0
cythilya
iT邦新手 4 級 ‧ 2017-12-30 17:09:19

/images/emoticon/emoticon07.gif

喜歡JQ嗎

我要留言

立即登入留言