ajaxを途中で止める
概要
Ajax通信を途中で止めたい場合
スクリプト
Ajax通信を変数「request」
jQuery
request = $.ajax({
url: xxx.xml,
type: "GET",
dataType: "xml",
timeout: 10000,
cache: false,
error: function(){
// 失敗したとき
},
success: function(xml){
// 成功したとき
}
});
停止方法
停止したい場合「request」をabort
request.abort();
Ajaxで画像アップロード
jQueryのAjaxで画像をアップロードする場合
使用方法
var formData = new FormData( $('form')[0] );
var url = 'test_api.php';
var opt = {
type: 'POST',
url: url,
dataType: 'json',
timeout: 10000,
cache: false,
data: formData,
processData: false,// Ajaxがdataを整形しない指定
contentType: false // contentTypeもfalseに指定
};
$.ajax(opt).done(function (response, textStatus, jqXHR) {
//通信が成功したとき
}).fail(function (jqXHR, textStatus, errorThrown) {
//通信に失敗したとき
}).always(function (jqXHR,json) {
//通信が完了したとき
});
解説
jQueryのAjax通信する場合、jQueryがPOSTデータを整形するため、整形しない設定にする必要があります。
要素が削除された時のカスタムイベント
概要
jQueryで要素が削除された時にイベントを発火させる
スクリプト
** JavaScript **
(function($){
////////////
$.event.special.onremove = {
remove: function(o) {
if (o.handler) {
o.handler.apply(this, arguments);
}
}
};
})(jQuery);
使用方法
$(element).on('onremove',function(e){
//要素が削除されたあとの処理
});
jQueryとprototypeの両方を使う時にやるべきこと
概要
jQuery.jsとprototype.jsの両方をサイトで使用している場合
jQuery側の「$」関数を別の名前にする
jQuery.noConflict();
var j$ = jQuery;
使用方法
j$(function(){
//処理
});
カスタムイベント
概要
jQueryでカスタムイベントを使用する場合
スクリプト
「customEvent」というイベントを作成しましす。
//イベント設定
$(window).on('customEvent', function() {
//イベント処理
});
//発火
$(window).trigger('customEvent');