読者です 読者をやめる 読者になる 読者になる

脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

ajaxと非ajax(jqueryだけ)でweb APIにクエリーを投げる方法

JavaScript jQuery

jQueryだけ

$.${通信方式}(${URL}, { ${param名1}: ${value1}, ${param名2}: ${value2} },
  function(res){
    // 成功時の処理
  }); 

// 例
$.get('http://hogehoge.html', { foo: 'bar', hoge: 'fuga' },
  function(res){
    alert(res);
  }); 
  • 簡潔に実装できる
  • 失敗時の処理等を場合わけして書くことはできない

ajax

$.ajax({
    url: ,
    type: ,  // 通信方式("POST"や"GET"、それ以外も使えるが正常に動くかは環境による)
    data: { ${param名1}: ${value1}, ${param名2}: ${value2} },  // APIに送りたいパラメータを指定
    datatype: ''.  // レスポンスの型(指定しなければxml,json,script,htmlからjQueryがMIME typeを元に判別)
    cache: , 
}).done(function(res){
    // 成功時の処理
}).fail(function(){  //.error()は非推奨となった
    // 失敗時の処理
});

// 例
$.ajax({
    url: "../",
    type: 'POST',
    data: { foo: 'var', hoge: 'fuga' },
    cache: false,
}).done(function(res){
    document.body(res);
}).fail(function(){
    alert('Failed!!');
});
  • 記述は若干長くなるが、リクエストが成功したときと失敗したときの処理をわけて記述することが出来る
  • .error()は現在非推奨で、替わりに.fail()を使う