Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【JavaScript】jQuery

More than 1 year has passed since last update.

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');

hiron712
備忘録です。 間違っていたり、 どこかの引用もあります。 すみません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away