カテゴリー : JavaScript

[jQuery] jQuery.ajax(options)、$.ajax のメモ

jQuery の $.ajax メソッドの引数や、success, error, complete などに指定する引数をよく忘れてしまうのでメモ。

jQuery 1.7 までの $.ajax

$.ajax({
  url: 'http://api.example.com/v1/posts',
  type: 'POST',
  dataType: 'HTML',
  data: {
    id: '123'
  },
  success: function(data, statusText, xhr){
    if (xhr.status === 200) {
      // 成功時の処理
    } else if (xhr.status === 302) {
      // HTTPステータスコードによって、処理を分岐
 
      // 302 でリダイレクトさせたり
      location.href = 'http://example.com/redirect';
    }
  },
  error: function(xhr, statusText, error) {
    // エラー処理
  },
  complete: function(xhr, statusText){
    // 共通処理
  }
});

jQuery 1.8 以降の $.ajax

success, error, complete が .done, .fail, .always に変更されているようです。

これについては、いつか更新します。


参考情報

jQuery.ajax()のまとめ: 小粋空間

jQuery モダンAjaxな書き方を目指して 〜Deferredを使ったAJAX〜 – Hack Your Design!

jQuery.ajax(options) – jQuery 日本語リファレンス

jQuery.ajax() | jQuery API Documentation

[jQuery] チェック済みの checkbox の値を取得して配列へ格納する方法

jQuery で、チェック済みの checkbox の値を取得して配列へ格納する方法をメモ。

<input type="checkbox" name="seasons" value="spring"> 春
<input type="checkbox" name="seasons" value="summer"> 夏
<input type="checkbox" name="seasons" value="autumn"> 秋
<input type="checkbox" name="seasons" value="winter"> 冬

チェックされた checkbox の値を取得して、配列に格納するコードは下記の通りです。

var checkedSeasons = [];
$('[name="seasons"]:checked').each(function(){
  checkedSeasons.push($(this).val());
});

参考情報

jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 – knt45の日記

[CoffeeScript] object の Iterator は for of

CoffeeScript で、object のイテレータは for of らしいです。

CoffeeScript

for key of object

JavaScript

for (key in object) {
}

参考情報

javascript – for (var key in object) in CoffeeScript? – Stack Overflow

[CoffeeScript] @ と => で that = this を無くす

ここを読むんだ!

CoffeeScriptの@について再び | ひげろぐ

[jQuery] フォームの値をクリア、リセット、空にする方法

jQuery でフォームの値をクリアする方法をご紹介します。

jQuery

続きを読む

CoffeeScript のインストール方法

CoffeeScript をインストールする方法をメモ。

事前準備

npm からインストールするのが定番みたいなので、nvm と Node.js をインストールしておく。

[Node.js] バージョン管理ツール「nvm」を Mac にインストールする方法

CoffeeScript のインストール

npm install -g coffee-script コマンドでサクッとインストールする。

% npm install -g coffee-script
npm http GET https://registry.npmjs.org/coffee-script
npm http 200 https://registry.npmjs.org/coffee-script
/Users/bakorer/.nvm/v0.6.19/bin/coffee -> /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script/bin/coffee
/Users/bakorer/.nvm/v0.6.19/bin/cake -> /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script/bin/cake
coffee-script@1.6.1 /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script
 
% source ~/.zshrc                                                    
 
% coffee -v
CoffeeScript version 1.6.1

カンタンですね!

参考情報

coffeescript を ubuntu 12.04 にインストール – {[Takuya71]}の日記

AndroidとiPhoneで使えるURLスキーム起動&アプリ未ダウンロードならストアへリダイレクトするJavaScriptサンプルコード

Android と iPhone で使える URL スキーム起動&アプリ未ダウンロードならストアへリダイレクトするJavaScriptサンプルコードをご紹介します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>URL scheme / Redirect Test</title>
 
    <script type="text/javascript">
    var userAgent = navigator.userAgent.toLowerCase();
 
    window.onload = function(){
 
      if (userAgent.indexOf("android") > -1) {
        // Launch myapp via URL scheme
        launch_frame.location.href= "myapp://";
 
        setTimeout(function(){
          // Open App DL page in Google Play
          location.href= "http://market.android.com/details?id=com.example.myapp";
        } , 500);
      } else if (userAgent.search(/iphone|ipad|ipod/) > -1) {
        // Launch myapp via URL scheme
        launch_frame.location.href= "myapp://";
 
        setTimeout(function(){
          // Open App DL page in iTunes Store
          location.href= "itmss://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
        } , 500);
      }
 
    }
    </script>
 
  </head>
 
<body>
  <div style="width:0; height:0; overflow:hidden;">
  <iframe id="launch_frame" name="launch_frame">
  </iframe>
  </div>
</body>
 
</html>

JSONP のセキュリティについて

JSONP を使う上でのセキュリティについて気になったので、調べたサイトをメモ。

Web 2.0的アプリのセキュリティ:機密情報にJSONPでアクセスするな : アークウェブのブログ

第3回 JSONPでのクロスドメインアクセス:ここが危ない!Web2.0のセキュリティ|gihyo.jp … 技術評論社

[気になる]JSONPの守り方 - @IT

なぜJSONPだとクロスドメイン制約を超えられるのか? – 射撃しつつ前転

JSONPはセキュアでないのか? – snippets from shinichitomita’s journal

Node.js (Express) で JSONP を対応させる方法は下記が参考になります。

Express で JSONP をスマートにレスポンスする方法

[jQuery] 日時の入力フォームは2つに分けて Datepicker と Timepicker を使う

タイトルでほぼ終わってますが。

入力補助に jQuery のライブラリを使う場合、下記のようにするのが手っ取り早そう。

・日時の入力フォームは2つに分ける
・年月日のフォームには Datepicker を使う
・時刻のフォームには Timepicker を使う

年月日と時刻をひとまとめにする場合、良さそうな jQuery ライブラリが無かった。

[jQuery] フォームやリンクの二度押し・連続クリック防止

jQuery で、フォームやリンクの二度押し・連続クリックを防止する方法をメモ。