如何在表单提交后用JavaScript即时改变按钮背景色

你遇到的问题核心是：同步表单提交会触发页面刷新，页面刷新前的JS修改或Razor渲染的样式，用户无法即时看到——因为点击按钮后浏览器立刻开始加载新页面，旧页面的DOM修改会被丢弃。要实现点击后即时反馈，有两种常用方案：

方案一：点击时先修改样式，再允许表单提交 #

这种方式最简单，不需要改变表单提交逻辑，只是在点击按钮的瞬间先更新样式，表单依然正常同步提交，页面刷新后Razor的样式也会保持最终状态。

代码实现 #

方式1：事件监听（符合现代JS规范）

<form asp-area="Sets" asp-controller="Home" asp-action="Favorite" asp-route-id="@Model.CurrentWord.Id" method="post" class="col-2 text-white">
  <button id="BtnFav" type="submit" class="btn sound-fav-btn @(Model.CurrentWord.IsFavorite ? "favorited" : "")" title="Favorite">
    <i class="bi bi-star-fill"></i>
  </button>
</form>

<script>
document.getElementById('BtnFav').addEventListener('click', function() {
  this.classList.toggle('favorited');
});
</script>

<style>
.sound-fav-btn {
  background-color: transparent;
}
.sound-fav-btn.favorited {
  background-color: yellow;
}
</style>

方案二：AJAX异步提交表单（无页面刷新） #

如果希望页面不刷新，完全通过JS控制状态，用AJAX提交表单是更好的选择。这种方式用户体验更流畅，还能根据后端返回的结果确认最终状态。

代码实现 #

<form id="favoriteForm" asp-area="Sets" asp-controller="Home" asp-action="Favorite" asp-route-id="@Model.CurrentWord.Id" method="post" class="col-2 text-white">
  <button id="BtnFav" type="submit" class="btn sound-fav-btn @(Model.CurrentWord.IsFavorite ? "favorited" : "")" title="Favorite">
    <i class="bi bi-star-fill"></i>
  </button>
  <!-- ASP.NET自动生成的防CSRF令牌，AJAX提交需要带上 -->
  @Html.AntiForgeryToken()
</form>

<script>
document.getElementById('favoriteForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认的同步提交
  const form = this;
  const btn = document.getElementById('BtnFav');
  const currentIsFav = btn.classList.contains('favorited');

  // 先临时切换样式给用户即时反馈
  btn.classList.toggle('favorited');

  // 用Fetch API提交表单
  fetch(form.action, {
    method: form.method,
    headers: {
      'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
    },
    body: new FormData(form)
  })
  .then(response => response.json()) // 假设后端返回JSON格式：{ isFavorite: boolean }
  .then(data => {
    // 根据后端返回的真实状态调整样式（避免前端临时状态和后端不一致）
    if (data.isFavorite) {
      btn.classList.add('favorited');
    } else {
      btn.classList.remove('favorited');
    }
  })
  .catch(error => {
    // 请求失败时恢复之前的样式
    if (currentIsFav) {
      btn.classList.add('favorited');
    } else {
      btn.classList.remove('favorited');
    }
    console.error('收藏提交失败:', error);
  });
});
</script>

<style>
.sound-fav-btn {
  background-color: transparent;
}
.sound-fav-btn.favorited {
  background-color: yellow;
}
</style>

后端注意事项 #

后端的Favorite action需要返回JSON格式的结果，示例：

[HttpPost]
public IActionResult Favorite(int id)
{
  // 处理收藏逻辑，更新IsFavorite状态
  var word = _db.Words.Find(id);
  word.IsFavorite = !word.IsFavorite;
  _db.SaveChanges();

  return Json(new { isFavorite = word.IsFavorite });
}

为什么原来的方法不生效？ #

你之前用的Razor表达式和页面加载时的JS，都是在页面渲染完成后执行的。而同步表单提交时，点击按钮后浏览器会立刻开始加载新页面，旧页面的DOM会被销毁，所以这些代码的效果用户根本看不到。必须在点击按钮的瞬间就修改样式，才能让用户即时看到变化。

内容的提问来源于stack exchange，提问作者2033