jQuery/ajaxボタン変数を使用してクリック

Question

jQuery/Ajaxを使用して簡単なWebページを実装したいと思います。 3つのボタンがあり、それぞれがajaxコールを使用してサーバーから別のファイルを取得します。唯一の違いは、各ボタンが異なるクラス名を持ち、異なるファイルを呼び出すことです。ローディング時間、ローディングアイコン、成功/失敗メッセージなどはすべて同じです。したがって、私は私が持っている代わりに、3

の、唯一の1のAjax機能を書きたいと思います：

<script> 
$(document).ready(function(){ 
    $(".button1").click(function(){ 
     $.ajax({ 
      url: "button1.txt", 
      /*more code*/ 
     }); 
    }); 
}); 
</script> 

私は、この「ボタン1」と「button1.txtは」になりますように、別の関数を作成したいです変数、および関数から返されるものは、ajax関数で使用されます。この方法で、ajax関数を3回再利用できます。 これはどのように達成できますか？

Answer 1

あなたのAjaxのその後

<button class='button1' data-url='button1.txt'>button 1</button> 
<button class='button2' data-url='button2.txt'>button 2</button> 
<button class='button3' data-url='button3.txt'>button 3</button> 

のようにすべての3つのボタンでURLを設定するためのあなたの必要性。

<script> 
$(document).ready(function(){ 
$(".button1, .button2, .button3").click(function(){ 
var url = $(this).attr('data-url'); 
    $.ajax({ 
     url: url", 
     /*more code*/ 
    }); 
}); 
}); 

Answer 2

単に

<script> 
    $(document).ready(function(){ 
    $(".button1, .button2 , .button3").click(function(){ 
     $.ajax({ 
      url: "button1.txt", 
      /*more code*/ 
     }); 
     }); 
    }); 
</script> 

2クリックイベントでボタンを追加：

Answer 3

EDITは、データのurlという名前の属性を言う、それをフェッチデータ属性を使用して、HTMLでonclikクリックイベントを追加あなたのクリックイベント内

すべてのボタンに同じクラス名を指定します。

<script> 
$(document).ready(function(){ 
    $(".buttonClass").click(function(){ 
     //var value = $(this).attr("value"); 
    var dataUrl = $(this).attr('data-url'); 
     $.ajax({ 
      url: dataUrl, 
      /*more code*/ 
     }); 
    }); 
}); 
</script> 

Answer 4

あなたはdata-*接頭辞カスタムを使用することができ、ボタンの値を取得し、AJAX呼び出しに渡すことは$.ajax()機能でアクセスするファイルを格納する属性。共通のクラスを使用してイベントハンドラをアタッチすることができます。

HTML

<button class="button" filename="button1.txt"></button> 
<button class="button" filename="button2.txt"></button> 
<button class="button" filename="button3.txt"></button> 

FileNameがElement.datasetプロパティまたはjQueryの.data()メソッドを使用して取り出すことができます。

スクリプト

$(".button").click(function(){ 
    var fileName = this.dataset.filename; 
    $.ajax({ 
     url: fileName, 
     /*more code*/ 
    }); 
}); 

Answer 5

私は、共通のクラス名は十分であろうと思います。この

$(document).ready(function(){ 
    $(".button1, .button2 , .button3").click(function(){ 
     var value = $(this).attr("value"); 
     $.ajax({ 
      url: value, 
      /*main logic*/ 
     }); 
    }); 
}); 

Answer 6

を試してみてください。あなたのボタンには異なるIDが必要ですが、必須ではありません。この場合、thisを使用することができます。

私は、これはパラメータ化機能であなたのAJAXを置くことで行うことができると思う：

function myAjaxCall(){ 
    var url = this.textContent.trim().toLowerCase()+'.txt'; 

    $.ajax({ 
     url: url, 
     /*more code*/ 
    }); 
} 

$(document).ready(function(){ 
    $(".button").click(myAjaxCall); 
}); 

、ボタンを考慮してください。

<button class='button'>Button1</button> 
<button class='button'>Button2</button> 
<button class='button'>Button3</button>