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

Question

我只是想知道是否可以提交一个提交表单循环，然后从这些提交表单中提交，而无需刷新/重新加载整个页面。

我之所以想知道的原因是因为，我目前正在一个网站上工作，我想做的是让用户能够像他们喜欢的图片/消息一样按下（就像Twitter上的推文一样instagram）但是现在，当你按下like按钮时，如果我做了一个简单的@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必须是唯一的

$(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>