【解放区在住氷翠 緑の閃光】WEB入門

ajax

2020-04-28 19:30

最近はPHPよりjavascriptを組んでいる方が多い氷翠です。(2020.04.28)

jqueryで用意されている「ajax」。多機能で細かく制御が可能になっている。これを使いこなすのは困難だと思う。
思った以上に細かいメソッドも用意されているし、今までやってきたのも、うまく動作しなくなっているので、新しいやり方を用意というか、共通事項として準備したほうが今後使いやすくなるのではないだろうか。

前情報として、現在氷翠が使用しているJqueryのバージョンは「3.2.1」。

ということで、そのテンプレートのようなものを用意することにした。


$.ajax({
        url: 送信先,
        async: 同期処理,
        data: 送信データ,
        method: POSTかGET,
        dataType: "html",
        beforeSend: function() {
            送信する前に行う処理
        },
        error: function() {
            エラーが起きた際に行う処理
            ↓はそこで処理を完全に止める場合
            return false;
        }
    })
    .statusCode({
        // ステータスコードによる処理
        404: function() {
            NOT FOUNDの処理
            ↓はそこで処理を完全に止める場合
            return false;
        },
        500: function() {
            INTERNAL SERVER ERRORの処理
            ↓はそこで処理を完全に止める場合
            return false;
        }
    })
    .done(function( data ) {
        通信が完了した後の処理
    });

ということでこれが基本形になる。

しかし、場合によってはもっと単純化してもいいだろう。

また、そのフォームによってはファイルを送信する場合もある。


var formdata = new FormData();
formdata.append( "file", file );
$.ajax({
        url: 送信先,
        async: 同期処理,
        data: formdata,
        method: "POST",
        dataType: "html",
        contentType: false,
        processData: false,
        beforeSend: function() {
            送信する前に行う処理
        },
        error: function() {
            エラーが起きた際に行う処理
            ↓はそこで処理を完全に止める場合
            return false;
        }
    })
    .statusCode({
        // ステータスコードによる処理
        404: function() {
            NOT FOUNDの処理
            ↓はそこで処理を完全に止める場合
            return false;
        },
        500: function() {
            INTERNAL SERVER ERRORの処理
            ↓はそこで処理を完全に止める場合
            return false;
        }
    })
    .done(function( data ) {
        通信が完了した後の処理
    });

違いは、フォームデータのオブジェクトを送信データとして入れておくこと、そして、「contentType: false」と「processData: false」を準備しておく。
単純に、余計な情報は渡さない方がよいということです。