多重提交表单无需重新加载

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>