※スマホ対応はしてません。

タグ: Ajax

VueでAjaxやるときはaxiosがおすすめなんだって。(Vue.js始めるおれおれアドベントカレンダー2016 – 14日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 14日目

Vueあんまり関係ない感じだけど、全く関係ないわけでもないので良しとしてください。

VueでAjax

かつては公式で vue-resource というライブラリを用意していたけれど、今は axios というライブラリが公式推奨であるらしい。

axios

使い方も簡単そう。

IE 8+で動作。手厚い。(ちなみにVue.js v2はIE 9+。) もちろん昔の環境で動かすには最近の書き方は通じませんので、なんかまあバベるとか何とかしてください。

インストール

$ npm i -S axios
const axios = require('axios')

使い方

axios.get(url) みたいにして送信、戻り値はPromise。

res.data に応答内容が入ってるみたい。

data: {
  sending: false
},
methods: {
  form_submit (event) {
    this.sending = true

    axios.get(url, data)
      .then(res => {
        this.sending = false
        console.log(res.status, res.statusText, res.data)
        // => 200, "OK", { message: "You just sent the data!" }
      })
      .catch(error => {
        this.sending = false
        throw error
      })
  }
}

もっとVueに繋げる

vue-resourceはVueと密に繋がって、 this.$http.get() みたいな感じで使うそうだ。

axiosは完全に独立しているけれど、 this から参照できるようにしたい場合用に、vue-axiosというものを用意している人がいた。

これを導入すると this.axios.get() が使えるようになるとか。(試してません。)

長所は require() を省けることくらい? んーでも省かない方が思想的に良いのでは。

よくわからないこと

公式推奨って

何だろ? どこかに一覧とかあるのかな?

原文の表現は、引用符付きで “official recommendation” 。

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。

カテゴリー: JavaScript

仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。

フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。

基本的な流れ

  1. フォームのsubmitを拾う
  2. 通常の送信はキャンセル
  3. 送信ボタンを無効化
  4. 送信先URLやフォームの入力値を取得
  5. 送信
  6. 受信後、送信ボタンを戻す

入力値をどう得るか、というのがポイントかと思います。

送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。

デモ

なんかお問い合わせフォーム的なものを用意しました。

まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。

(さらに…)

フルAjaxで動くRailsアプリを作ってみたよ。

カテゴリー: Web

scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。

記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。

RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (`・ω・´)

概要

やること

indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。

(さらに…)