提交时 ASP.NET jQuery 重新加载元素（Ajax POST/GET）

Question

使用 ASP.NET 我尝试使用 jQuery 而不是使用“location.reload();”仅重新加载网页的一部分。这是一个单页应用程序。当用户提交表单时，用户积分会发生变化，并且应该更新新值，而无需重新加载整个页面。 credits 的值是通过 Ajax Get Call 检索的，并且应该在 Ajax Post Call 之后更新。我尝试使用 "$("#userCredits").load(?);"在 Ajax Post 中，但无法正确处理。我需要做一个局部视图来实现这一点吗？感谢您的帮助。

HTML _Layout.cshtml

<ul class="nav masthead-nav">
   <li id="userCredits">
      //Paragraph retrived from Ajax Get Call: "#reloadUserCredits".
   </li>

   <li>
     <p class="user">@User.Identity.GetUserName()</p>
   </li>
</ul>

JS

//Ajax POST user pack (buy pack)
    $("#postform").submit(function (e) {
        e.preventDefault();
        var data = {
            applicationUserId: $("#userId").val().trim(),
            packId: $("input.activeImg").val().trim(),
        }
        $.ajax({
            url: '/api/buypack',
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function () {
                document.getElementById("postform").reset();
                location.reload();
            },
            error: function () {
            }
        });
    });

// Ajax GET user credits (navbar userCredits)
    var $credits = $('#userCredits')

    $.ajax({
        type: 'GET',
        url: '/api/user',
        success: function (credits) {
            $.each(credits, function (i, user) {
                $credits.append('<p id="reloadUserCredits" class="credits">Credits: ' + user.credits + '</p>');
            });
        }
    });

Answer 1

据我了解...您已经在页面加载时通过 Ajax 获得用户积分。所以你只需要在他多买一些之后再做一次。

在命名函数中向/api/user 发出Ajax 请求。下面，我称之为get_credits()。在页面加载和对/api/buypack 的 Ajax 请求成功时运行它。

//Ajax POST user pack (buy pack)
$("#postform").submit(function (e) {
    e.preventDefault();
    var data = {
        applicationUserId: $("#userId").val().trim(),
        packId: $("input.activeImg").val().trim(),
    }
    $.ajax({
        url: '/api/buypack',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: function () {
            document.getElementById("postform").reset();
            //location.reload();
            
            // Refresh the credits displayed on the page
            get_credits();
        },
        error: function () {
        }
    });
});

// Ajax GET user credits (navbar userCredits)
var $credits = $('#userCredits')

function get_credits(){
  $.ajax({
    type: 'GET',
    url: '/api/user',
    success: function (credits) {
      $.each(credits, function (i, user) {
        $credits.html('<p id="reloadUserCredits" class="credits">Credits: ' + user.credits + '</p>');
      });
    }
  });
}

// Run on page load
get_credits();