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

Posted 2023-05-08

【中文标题】提交时 ASP.NET jQuery 重新加载元素（Ajax POST/GET）

【英文标题】：ASP.NET jQuery reload element on submit (Ajax POST/GET)

【发布时间】：2021-10-06 22:10:21

【问题描述】：

使用 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>');
            );
        
    );

【参考方案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();

【讨论】：

感谢您的帮助。尽管它重复了学分段落，但它接近解决方案。见链接中的图片：niklasmalm.se/img/duplicate.png

找到了一个解决方案，它现在似乎工作正常。 // 刷新页面显示的积分 $("#reloadUserCredits").replaceWith(get_credits())

我明白了。 “重复”是因为.append 在getCredits 的每个循环中。你可以试试.html。会更有效率。但是您使用replaceWith 的解决方案也是正确的，因为它有效；）

哦，现在我明白了！起初我没有注意到“.html”。您的解决方案要好得多。现在我可以继续了，谢谢你的帮助！ :)