多重提交表單無需重新加載

Question

我只是想知道是否可能有一個提交表單循環，然後從任何這些提交表單提交而無需刷新/重新加載整個頁面。

我想知道的原因是因爲，我目前正在一個網站上工作，我想要做的是讓用戶能夠像他們喜歡圖片/消息一樣按下（像twitter上的推文或圖片在Instagram的），但現在，當你按下像按鈕，它刷新整個頁面，如果我做一個簡單的@using（html.beginform（「」，「」）），但如果我使用jquery，那麼它只能工作最後一種形式（一個在頂部）上

$(document).ready(function() { 
    $("#submit-buttons").on('click', function() { 
     var id = $('#submit-buttons').val(); 
     $.ajax({ 
      url: "/Profile/Like", 
      type: "POST", 
      data: { id: id } 
     }) 
     .done(function (partialViewResult) { 
      $("body").html(partialViewResult); 
      window.location.href = "/Profile/Index"; 
     }); 
    }); 
}); 

<button id="submit-buttons" name="id" value="@item.Id" type="submit"></button> 

提交 - 按鈕是如按鈕，並且它是什麼，它需要的值（ID），並把它傳遞給控制器​​，然後將其插入到數據庫。但有幾個這樣的按鈕，但只有一個作品（最後一個被打圈）。我做錯了什麼？ ：/

請幫忙。 謝謝！

Answer 1

我在理解你的問題時遇到了一些麻煩，但我認爲使用$(this)選擇器和type=submit將有助於它的工作。

$(document).ready(function() { 
    $("#submit-buttons").on('click', function() { 
     var id = $(this).val(); 
     $.ajax({ 
      url: "/Profile/Like", 
      type: "POST", 
      data: { id: id } 
     }) 
     .done(function (partialViewResult) { 
      $("body").html(partialViewResult); 
      window.location.href = "/Profile/Index"; 
     }); 
    }); 
}); 

<button id="submit-buttons" name="id" value="@item.Id" type="button"></button> 

Answer 2

嘗試使用類的按鈕作爲id如果有「幾個這樣的按鈕，」他們不能有相同的ID必須是唯一的

$(document).ready(function() { 
    $(".submit-buttons").on('click', function() { 
     var id = $(this).val(); 
     $.ajax({ 
      url: "/Profile/Like", 
      type: "POST", 
      data: { id: id } 
     }) 
     .done(function (partialViewResult) { 
      $("body").html(partialViewResult); 
      window.location.href = "/Profile/Index"; 
     }); 
    }); 
}); 

<button id="submit-button1" class="submit-buttons" name="id" value="@item.Id" type="submit"></button>