LoginSignup
44

More than 5 years have passed since last update.

Vue.js + jQuery で Ajax の練習 (GET)

Last updated at Posted at 2016-11-08

Web サーバーと非同期に通信するサンプル。

つまづきやすいのは JavaScript の this。this (のスコープ) について理解するには、書籍 JavaScript Ninjaの極意 がオススメ。

GET でリソースを取得する

郵便番号検索API - zipcloud
http://zipcloud.ibsnet.co.jp/doc/api

の JSONP API を使って、郵便番号から住所を取得する。

API の動作を確認する

郵便番号 103-0028 の住所を Web ブラウザーに表示する。

{
    "message": null,
    "results": [
        {
            "address1": "東京都",
            "address2": "中央区",
            "address3": "八重洲",
            "kana1": "トウキョウト",
            "kana2": "チュウオウク",
            "kana3": "ヤエス",
            "prefcode": "13",
            "zipcode": "1030028"
        }
    ],
    "status": 200
}

Playground サービスで動作を確認する

http://codepen.io で New Pen から新しい Playground を作る。

Settings > JavaScript > Quick-add > jQuery を選択し Save & Close ボタンを押す。

$(function() {
  var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=1030028';
  $.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(data) {
      console.log(data);
    }
  });  
});

$(function(){}); は、ブラウザーが ready 状態になったらコードを実行する。

$.ajax(); は url の呼び出しが成功すると、その結果 data を success に渡して function を実行する。

Console にリソースを取得した結果が表示される。url の zipcode を変更すると結果が変わる。

dataType を指定しない場合

dataType に jsonp を指定せず、 url: url + '?callback=?' としても同じ結果になる。

JSONP は、API を提供する Web サーバーのホスト名と、API を利用する Web ページのホスト名が異なる「クロスドメイン」で API を利用する仕組み。

$.ajax() の省略形 $.get()

$(function() {
  var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=1030028';
  $.get(url,function(data) {
    console.log(data);
  }, 'jsonp');
});

と書くこともできる。

Vue.js でひな形を作る

ダミーデータを使って画面を作る。

Settings > JavaScript で https://unpkg.com/vue/dist/vue.js を追加し Save & Close ボタンを押す。

<div id="zip">
  <p>郵便番号<input type="text" v-model="zipcode"><button>住所を表示</button></p>
  <input type="text" v-model="address1">
  <input type="text" v-model="address2">
  <input type="text" v-model="address3">
</div>
new Vue({
  el: '#zip',
  data: {
    zipcode: '1030028',
    address1: '住所1',
    address2: '住所2',
    address3: '住所3'
  },
  methods: {}
});

Vue.js と $.get() を組み合わせる

ボタンを押すと、API を呼び出し、結果を表示する。

bind(this) に注意する。$.get() が成功したときに実行する function が、その外側にある Vue の data に this でアクセスできるようになる。

<div id="zip">
  <p>郵便番号<input type="text" v-model="zipcode"><button v-on:click="fetchAddress(zipcode)">住所を表示</button></p>
  <input type="text" v-model="address1">
  <input type="text" v-model="address2">
  <input type="text" v-model="address3">
</div>
new Vue({
  el: '#zip',
  data: {
    zipcode: '1030028',
    address1: '住所1',
    address2: '住所2',
    address3: '住所3'
  },
  methods: {
    fetchAddress: function(zipcode) {
      var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=' + zipcode;
      $.get(url, function(data) {
          var result = data.results[0];
          this.address1 = result.address1;
          this.address2 = result.address2;
          this.address3 = result.address3;
        }.bind(this), 'jsonp');
    }
  }
});

bind を使わない場合

$.get() が成功したときに実行する function が、その外側の this (Vue の data) を参照するために、this を別の名前の変数 (ここでは that) に代入しておく。function からは that を使って Vue の data を参照する。

this.address1 が that.address1 に変わっていることに注意する。

    fetchAddress: function(zipcode) {
      var that = this;
      var url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=' + zipcode;
      $.get(url, function(data) {
          var result = data.results[0];
          that.address1 = result.address1;
          that.address2 = result.address2;
          that.address3 = result.address3;
        }, 'jsonp');
    }

課題

  • API を呼び出している間、画面に「データ取得中...」と表示する。
  • 郵便番号に数字を7桁入力すると自動的に API を呼び出す。

(おまけ) POST でリソースを作る

次の記事を参考にして、ToDo 管理アプリを作ってみる。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44