使用ID參數刷新Ajax內容

Question

我試圖創建一個從按鈕獲取元素值並創建ajax請求的函數。在開始的'id'是空的，所以下面的JS函數應該使用'id = 1'，但是當我點擊按鈕時，值「2」函數應該加載「includes/agallery.php？id = 2」到我的#agallery。

<script type="text/javascript"> 
    var id = 1; 
    $('#agallery').html('Downloading...'); // Show "Downloading..." 
    // Do an ajax request 
    $.ajax({ 
     url: "includes/agallery.php?id="+id 
    }).done(function(data) { // data what is sent back by the php page 
     $('#agallery').html(data); // display data 
    }); 
</script> 

<button onClick="" value="2" class="small-btn last"></button> 

Answer 1

1. 創建一個doAjax函數，該函數的參數id，使Ajax請求
2. 註冊您的按鈕點擊事件監聽器（和刪除一個在html中）
3. 與id進行初始doAjax呼叫1

這是怎麼看起來像在代碼：

<script type="text/javascript"> 

    // create a function doAjax 
    function doAjax(id) { 
     $('#agallery').html('Downloading...'); // Show "Downloading..." 
     // Do an ajax request 
     $.ajax({ 
      url: "includes/agallery.php?id="+id 
     }).done(function(data) { // data what is sent back by the php page 
      $('#agallery').html(data); // display data 
     }); 
    } 


    $(function() { 
     // register a click handler 
     $("button.small-btn").click(function() { 
      var id = $(this).val(); 
      doAjax(id); 
     }); 

     // do initial ajax request (with id 1) 
     doAjax(1); 
    }); 

</script> 

在HTML中刪除onClick=""，使元素看起來是這樣的：

<button value="2" class="small-btn last"></button> 

這裏是一個工作jsFiddle demo

Answer 2

您需要在每次請求前增加id。

<script type="text/javascript"> 
    var id = 0; 
    $('#agallery').html('Downloading...'); // Show "Downloading..." 
    // Do an ajax request 
    id++; 
    $.ajax({ 
     url: "includes/agallery.php?id="+id 
    }).done(function(data) { // data what is sent back by the php page 
     $('#agallery').html(data); // display data 
    }); 
</script> 

Answer 3

你可能需要這個

<script type="text/javascript"> 
    $(".small-btn last").click(function() { 
     $('#agallery').html('Downloading...'); // Show "Downloading..." 
     // Do an ajax request 
    $.ajax({ 
     url: "includes/agallery.php?id="+$(this).val() 
     }).done(function(data) { // data what is sent back by the php page 
     $('#agallery').html(data); // display data 
     }); 
});