使用 AJAX 更改点击提交按钮的值

Question

所以我的索引视图中有一个类似这样的按钮。它调用函数“PostLike”，通过在我的“喜欢”中插入一个新行来增加喜欢的数量 table.

<form asp-action="PostLike" asp-route-id="@item.Id">
      <input id="btn" type="submit" value="Like" class="btn btn-primary">
</form>

我想做的是点击按钮时，将按钮的值从 like 更改为 unlike，而不刷新页面并在刷新应用程序后保留该值。有任何想法吗？我知道我必须使用一些 AJAX 函数才能工作，但我不知道它应该如何实现。

Answer 1

您可以调用 ajax 来检查成功或错误请求状态，然后更改成功方法中的值

ArticleLikeObj 是要发送到控制器以保存类似文章操作的对象，它是一个视图模型 class 包含 ArticleId 和 等属性当前登录用户

ajax 来电

<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">

<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">


<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">

function Submit_clicked(clicked_id)
  {
      let ArticleLikeObj = {ArticleId:clicked_id, UserName:"Doe"};
      SendRequest(ArticleLikeObj);
  }

function SendRequest(ArticleLikeObj) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("action name","controller name")',
                    data: ArticleLikeObj,
                    contentType: 'application/x-www-form-urlencoded',
                    dataType: "json",
                    success: function (response) {
                        document.getElementById("Submit").value = "Liked";
                    },
                    error: function () {
                        alert("Error!");
                    }
                });
            }

使用 AJAX 更改点击提交按钮的值

Change submit button value on click with AJAX

c#

asp.net

ajax

jquery

asp.net-core