异步 Ajax 调用在部分视图页面中执行操作时出现“警告:请求尚未在 chrome 中完成”

Asynchronous Ajax Calls giving "Caution: request is not finished yet in chrome" when performing operation in Partial View Page

提问人:rohan 提问时间:6/27/2023 最后编辑:rohan 更新时间:6/27/2023 访问量:78

问:

我有一个、、一些代码和三个部分视图。HistoryController.csindex.cshtmljavascript

在我有三个选项卡列表形式的部分视图,它们最初是隐藏的。 当我单击其中的一个按钮时,它会调用一个 javascript 函数来分别为三个部分视图调用三个 ajax 调用。index.cshtmlindex.cshtml

当前行为:但是,当加载一个部分视图时,如果我在开发人员工具中对该部分视图执行操作,它会显示警告:请求尚未在 chrome 中完成。它等待其他分部视图,然后执行该操作。

预期行为:我不想等待其他部分视图先加载,然后再进行一些交互。 如果加载第一个部分视图,我想执行一些交互,而其他视图则在后台加载。

索引.cshtml

<input type="button" id="HistorySearchButton" value="Search" class="buttoncommon" />

<div id="historyPane">
    <div id="tabs">
        <ul role="tablist">

            <li id="ClientHistoryDivTab" role="tab" aria-controls="companyHistoryDetailsTab">
                <a id="companyHistoryDetailsTabLink" href="#companyHistoryDetailsTab" class="ui-tabs-anchor tabs-bg" role="presentation">Client History</a>
            </li>

            <li id="CompanySubscriptionDivTab"  role="tab" aria-controls="companySubHistoryDetailsTab">
                <a id="companySubHistoryDetailsTabLink" href="#companySubHistoryDetailsTab" class="ui-tabs-anchor tabs-bg" role="presentation"> Company Sub History</a>
            </li>

            <li id="UserSubscriptionDivTab"  role="tab" aria-controls="userSubHistoryDetailsTab">
                <a id="userSubHistoryDetailsTabLink" href="#userSubHistoryDetailsTab"  role="presentation">User History</a>
            </li>
        </ul>
    </div>
</div>

<div id="companyHistoryDetailsTab" class="partial-container" style="display:none"></div>
<div id="companySubHistoryDetailsTab" class="partial-container" style="display:none"></div>
<div id="userSubHistoryDetailsTab" class="partial-container" style="display:none"></div>

Java 脚本代码

$("#HistorySearchButton").click(function () {
    LoadCompanyHistory();
    $("#companyHistoryDetailsTab").show();
    LoadCompanySubscriptionHistory();
    LoadUserSubscriptionHistory();
    });


 function LoadCompanyHistory() {
        $.ajax({
            url: '/History/GetCompanyDetailsHistory',
            type: 'GET',
            cache: false,
            traditional: true,
            async: true, 
            // some code
            success: function (data) {
                $("#companyHistoryDetailsTab").html(data);
            },
            // some code
        });
 }

  function LoadCompanySubscriptionHistory() {
        $.ajax({
            url: '/History/GetCompanySubcriptionHistory',
            type: 'GET',
            cache: false,
            traditional: true,
            async: true,
            // some code
            success: function (data) {
                $("#companySubHistoryDetailsTab").html(data);
            },
            // some code
            });
 }

   function LoadUserSubscriptionHistory() {
        $.ajax({
            url: '/History/GetUserSubcriptionHistory',
            type: 'GET',
            cache: false,
            traditional: true,
            async: true,
            // some code
            success: function (data) {
                $("#userSubHistoryDetailsTab").html(data);
            }, 
            // some code
        });
 }

历史控制器

[HttpGet]
public ActionResult GetCompanyDetailsHistory()
{
    // some logic
    return PartialView("_ClientDetailsHistory", model);
}

[HttpGet]
public ActionResult GetCompanySubcriptionHistory()
{
    // some logic
    return PartialView("_CompanySubscriptionHistory", model);
}

[HttpGet]
public ActionResult GetUserSubcriptionHistory()
{
    // some logic
    return PartialView("_UserSubscriptionHistory", model);
}
javascript html 异步 asp.net-ajax

评论


答: 暂无答案