複数のAjax呼び出しを回避する方法

debugcn 投稿 Dev

afeef

必要なもの

クリックイベントがトリガーされると、サービスコールが行われ、1回だけ呼び出すことができます。

使用事例

ドロップダウン1

ドロップダウン2

ドロップダウン3

        1. There are three dropdown in html page.
        2. when dropdown 1 is call - ajax call made only 1 time.
        3. when dropwdown 2 is call -ajax call made only 1 time.
        4. when dropwdown 3 is call -ajax call made only 1 time.

ここで、ユーザー変更ドロップダウン1。

        5. when dropwdown 1 is call -ajax call made only 1 time.

問題が発生します

        6. Now when dropwdown 2 is call -ajax call made only 2 time.
        7. Now when dropwdown 3 is call -ajax call made only 2 time.

ドロップダウン1を変更した場合の類似性

        count increase by one.

ここで、ユーザー変更ドロップダウン1。

        8. Now when dropwdown 2 is call -ajax call made only 3 time.
        9. Now when dropwdown 3 is call -ajax call made only 3 time.

Jsコード

dowpdown1はdowpdown_1でIDを割り当てました

dowpdown2はdowpdown_2でIDを割り当てました

dowpdown3はdowpdown_3でIDを割り当てました

$("#dowpdown_1").change(function() {
  $.ajax({
    url: 'path',
    cache: false,
    data: {
      data
    },
    success: function(html) {
      console.log('dowpdown_1');
      $("#dowpdown_2").change(function() {
        $.ajax({
          url: 'path',
          cache: false,
          data: {
            data
          },
          success: function(html) {
            console.log('dowpdown_2');
          }
        });
      }
      $("#dowpdown_3").change(function() {
        $.ajax({
          url: 'path',
          cache: false,
          data: {
            data
          },
          success: function(html) {
            console.log('dowpdown_3');
          }
        });
      });
    }
  });
});

どんな解決策でも大歓迎です。

Anastasios Selmanis

dropdown_1を変更するたびに、同じことを行うdropdown_2とdropdown_3に新しいイベントを追加します。

これは同じイベントのように見えるかもしれませんが、実際には新しい変更イベントをドロップダウンにバインドしています。

イベントを1回だけバインドするか、以前の構造（カスケード機能のように見えますが、よくわかりません）が必要な場合は、次のいずれかを使用できます。

$("#dowpdown_2").off().on('change', function () {// do the ajax});

$("#dowpdown_3").off().on('change', function () {// do the ajax});

このように、変更イベントに新しい関数を追加するたびに、少なくとも以前のすべてのイベントのバインドが解除され、再度トリガーされることはありません。もちろん、これは、バインドが解除されるため、ケースに関係する他の変更イベントがないことを意味します。

そうでなければ、私が言ったように、あなたはこれをすることができます

$("#dowpdown_1").on('change', function () 
{
    $.ajax({
    url: 'path',
    cache: false,
    data: {data},
    success: function (html) 
    {
      console.log('dowpdown_1');
    }
});

$("#dowpdown_2").on('change', function () {
        $.ajax({
        url: 'path',
        cache: false,
        data: {data},
        success: function (html) 
        {
            console.log('dowpdown_2');
        }
});
$("#dowpdown_3").on('change', function () {
    $.ajax({
    url: 'path',
    cache: false,
    data: {data},
    success: function (html) 
    {
        console.log('dowpdown_3');

    }
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]