jQueryにてAjax通信を行う方法。

バージョンによって対応は変わる。

jQueryのバージョン確認

ブラウザ上コンソールで良いので、以下のコードを実行する。

$().jquery

1.6以前と1.7～3.x系で通信完了後処理の書き方が変わるので注意。
未だに古いサイトはあるので、事前に対象サイトのjQueryバージョンを確認するクセは付けたほうがいい。

1.6以前

$.ajax({
  url: 'http://www.hoge.jp',
  dataType: 'html',
  success: function(html){
      // 取得後の処理
    }
});

1.7～3.x系

$.ajax({
  url: 'http://www.hoge.jp',
  dataType: 'html'
}).done(function(html){
  // 取得後の処理
});

オプション説明

type（1.9以降はmethodも使える）

get, post

url

送信先URL（基本的に同一ドメイン）

data

文字列でも配列でもハッシュでも通るが、見通しよくするためにもハッシュで統一した方が良い

dataType

text, html, json

サンプル

http://www.hoge.jpにname=”customr”にhugaを入力したデータをPOST送信し、JSON形式の結果を取得するサンプル。

$.ajax({
  method: 'post',
  data: {
    customr: 'huga'
  }
  url: 'http://www.hoge.jp',
  dataType: 'json'
}).done(function(json){
  // json変数にJSON形式でレスポンスが入る
});