文档就绪循环运行（添加查询字符串后）

Posted 2023-04-13

【中文标题】文档就绪循环运行（添加查询字符串后）

【英文标题】：document ready runs in a loop (after adding query string)

【发布时间】：2021-04-12 13:22:46

【问题描述】：

我有一个返回视图并将视图模型传递给视图的操作方法， 在我的应用程序的另一部分中调用此方法并传递输入参数后 url 看起来像这样 (localhost:51999:\Home\Onlineplayerguid)

 public async Task<IActionResult> OnlinePlayer(Guid id)
    
        if (id != Guid.Empty)
        
            var requestedFeed = await _feedService.FindOneAsync(id);
            var feedOwnerName = requestedFeed.OwnerName;
            
            ISpecification<Feed> spec = new FeedWithNotEndedStateSpec()
                .And(new FeedWithVerifiedStateSpec())
                .And(new FeedWithSpecificOwnerNameSpec(feedOwnerName));

            onlinePlayerVm.LatestMusics = await _feedService.GetListBySpecAsync<FeedPlayerDTOVm>
                    (new PaginationFilter(), spec);

            return View(onlinePlayerVm);
        
        onlinePlayerVm.LatestMusics = 
            await _feedService.GetListAsync<FeedPlayerDTOVm>(new PaginationFilter(1, 20));
            
        return View(onlinePlayerVm);
    

OnlinePlayer.cshtml 有一个'document.Ready()' jquery 函数来调用页面加载中的一些函数：

<script src="~/js/Custom/AudioPlayer.js" asp-append-version="true"></script>

<script>

    $(document).ready(function () 
        _latestMusicCurrentPage = 1;
        _topMusicCurrentPage = 1;
        _popMusicCurrentPage = 1;

        //GrabLatestMusics();

        if (@User.Identity.IsAuthenticated.ToString().ToLower()) 
            SaveLocalPlaylistToDatabaseAfterLogin();
            //GrabUserPlaylists();
        
        //LoadLocalPlaylists();

        var item = $("#playlistContainer").find("p[data-id=1]");
        PlayThisFromList(this, item, false);


        $(".RemoveFromList").click(function (e) 
            var dataId = $(this).attr('data-id');
            $(this).closest("p[data-id='" + dataId + "']").remove();
            e.stopPropagation();
        );

        $(".DownloadThisMusic").click(function (e) 
            var dataId = $(this).attr('data-id');
            PNotifyToasterWithParam("error", "پیاده سازی نشده است")
            e.stopPropagation();
        );

    );
    function GrabLatestMusics() 
        debugger
        $.post('LatestMusic',  pageIndex: _topMusicCurrentPage , function (data) 
            $("#latestSongsContainer").append(data);
        ).done(function () 
            SetColumntResizingAfterPlayerHidden();
        );;
    
</script>

问题 当 GrabLatestMusics() 函数被注释时，页面及其脚本工作正常，但是在取消注释此函数并在 url 查询字符串中传递和 Id 后，页面将崩溃并且文档准备好一遍又一遍地执行并发送对控制器中的 OnlinePlayer(Guid id) 操作方法的无限请求。我该如何解决这个问题！？

【问题讨论】：

你能比“页面会崩溃”更具体吗？问题出在服务器端还是客户端？是否抛出异常？如果是这样，什么类型，什么消息，堆栈是什么样的？是别的吗？

@Flydog57 不会抛出异常，错误出现在客户端在我取消注释“GrabLatestMusic”后，此方法在文档准备就绪时一遍又一遍地调用，并且某些脚本不再起作用

您对LatestMusic 发出的POST 请求返回的data 是什么？可以分享一下SetColumntResizingAfterPlayerHidden函数的代码吗？

@FeiHan ，两种情况下返回的数据都是一个列表，一种是20行，另一种是与输入ID相关的。 ~function SetColumntResizingAfterPlayerHidden() var $playlistCol = $("#playlistColumn"); var _playlistColumntFullScreenFlag = $playlistCol.attr('isFullScreen'); if (_playlistColumntFullScreenFlag == "true") $playlistCol.find('div.col-md-3').removeClass('col-md-3').addClass('col-md-2'); else $playlistCol.find('div.col-md-2').removeClass('col-md-2').addClass('col-md-3');

【参考方案1】：

在 GrabLatestMusics 方法中，您应该使用带有 Controller 和 Action 的完整地址。 （如果需要，也可以是区域）

function GrabLatestMusics() 
        $.post('/YourArea/YourController/LatestMusic', ...