まくまくJavaScriptノート
jQuery の ajax/get/post メソッドが動作しない
Ajax 系のコールバックが呼び出されない場合は、コールバックで受け取るデータ形式を示す、dataType の指定が間違っている可能性があります。
POST の際に間違いがちですが、dataType に指定するタイプは、クライアントが送るデータのタイプではなく、サーバが返すデータのタイプです。
$.ajax({
type: 'POST',
url: '/memos/create',
data: {body: 'Memo1'},
success: function(data) { alert('Created!'); },
dataType: 'text' // サーバが返すデータのタイプを指定
});
// 下記も同様
$.post('/memos/create', {body: 'Memo1'},
function() { alert('Created!'); }, 'text');
ボタンの click イベントをトリガにして Ajax 通信を発生させる場合、デフォルトの click イベント処理と重複してうまく動かないことがあります。 これを解決するには、デフォルトのイベントをキャンセルして Ajax 通信を行います。
$('#btn').click(function(e) {
e.preventDefault(); // デフォルトの挙動をキャンセル
$.ajax(...);
});
ブラウザにより異なりますが、特に IE や Firefox で、HTTP リクエストがキャッシュされてしまい、Ajax リクエストが実行されないことがあります。
これを防ぐには、$.ajax() のオプションとして、cache: false を指定します。
$.ajax({
type: 'DELETE',
url: '/memos/' + encodeURI(id),
cache: false, // リクエストをキャッシュしない
success: function(result) {
updateMemos();
}
});
