错误：“最大调用堆栈大小超出”AJAX 调用 WebMethod

Question

我正在尝试发送从RadGrid 的选定行检索到的GridDataItem 对象。
但是当我进行此 AJAX 调用时，我收到 Uncaught RangeError: Maximum call stack size exceeded 错误：

编辑：当我运行代码时，我的 AJAX 成功触发，但我在 WebMethod 上的断点从未命中。在此之后，页面会暂时冻结，然后我收到上面提到的错误。

jQuery

$(document).ready(function () {
    $('#<%=btnTransferIn.ClientID%>').on('click', function () {
        var grid = $find("<%= gridStudents.ClientID %>"); //Returns an Object
        var gridSelItems = grid.get_selectedItems(); //Returns Array
        //var selectedItem = gridSelItems[0]; //Returns an Object

        AjaxTransfer(gridSelItems);
    });
});

function AjaxTransfer(selectedItem) {
    $.ajax({
        type: "POST",
        url: "GradeSheet2.aspx/btnTransferIn_Click",
        data: { 'gsi': selectedItem },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: alert('Complete')
    })
}

C#

[System.Web.Services.WebMethod]
public static string btnTransferIn_Click(GridDataItem gsi)
{
    return "Done";
}

web.config

<?xml version="1.0"?>
    <configuration>

        <configSections>
        </configSections>

        <appSettings>
            <add key="AISAnalogPATH" value="\\tms-sse-01\tms_share\cbtExecutables\" />
            <add key="ExternalCAIPath" value="\\tms-sse-01\tms_share\cbtExecutables\" />
            <add key="AISDigitalPath" value="\\tms-sse-01\tms_share\cbtExecutables\" />
            <add key="AuthorwarePath" value="\\tms-sse-01\tms_share\cbtExecutables\" />
            <add key="QuestionMarkPath" value="\\tms-sse-01\tms_share\cbtExecutables\" />
            <add key="WelcomeMessage" value="Welcome to the TMS 2016 Program"/>
            <add key="Location" value="STL"/>
            <add key="TMSPagesConnectionString" value="server=tms-sse-01;User ID=xcv;Password=mumumu777;Initial Catalog=qwer12344567;"/>
            <add key="TMSConnectionString" value="server=tms-sse-01;User ID=xcv;Password=mumumu777;Initial Catalog=qwer12344567;"/>
            <add key="LogPath" value="e:\TMS\TMS_Log\"/>
            <add key="cbtPath" value="E:\C17CBT\"/>
            <add key="xmlPath" value="E:\TMS_XML\"/>
            <add key="TMSVersionId" value="2.0"/>

            <add key="PageHeight" value="750px"/>
            <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled"/>
            <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled"/>
         </appSettings>

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>    
        <remove name="ChartImage_axd"/>
        <remove name="Telerik_Web_UI_SpellCheckHandler_axd"/>
        <remove name="Telerik_Web_UI_DialogHandler_aspx"/>
        <remove name="Telerik_RadUploadProgressHandler_ashx"/>
        <remove name="Telerik_Web_UI_WebResource_axd"/>
        <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode"/>
        <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode"/>
        <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode"/>
        <add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode"/>
        <add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode"/>
    </handlers>
</system.webServer>

<system.web>
    <customErrors mode="Off"/>
    <httpHandlers>
        <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>
        <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false"/>
        <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
        <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false"/>
        <add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false"/>
    </httpHandlers>
    <compilation debug="true" targetFramework="4.5">
        <assemblies>
            <add assembly="Microsoft.VisualC, Version=10.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
            <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
            <add assembly="System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
        </assemblies>
    </compilation>
    <httpRuntime targetFramework="4.5"/>
        <authentication mode="Windows"/>
        <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
            <controls>
                <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
                <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"/>
                <add tagPrefix="TMSWeb" tagName="PersonList" src="~/TMS/Controls/PersonList.ascx"/>
                <add tagPrefix="TMSWeb" tagName="DateTemplate" src="~/TMS/Controls/DateTemplate.ascx"/>
            </controls>
        </pages>
    </system.web>

    <runtime>
        <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
            <dependentAssembly>
                <assemblyIdentity name="Microsoft.WindowsAzure.Storage" publicKeyToken="31bf3856ad364e35" culture="neutral"/>
            <bindingRedirect oldVersion="0.0.0.0-2.1.0.4" newVersion="2.1.0.4"/>
            </dependentAssembly>
        </assemblyBinding>
    </runtime>

</configuration>

我注意到，如果我将 WebMethod 的参数更改为字符串并传入字符串而不是对象，它就可以工作。因此，对象或我将其传递给 WebMethod 的方式似乎有问题。

我在进行 AJAX 调用之前检查了控制台中的对象，我认为它看起来还不错。虽然，我对它的了解并不高。

我希望我没有遗漏任何太重要的东西。如果需要更多信息，请告诉我。

提前致谢！

Answer 1

从您发布的屏幕截图来看，您正在传递给$.ajax 一个复杂的结构。 $.ajax 将尝试将此结构序列化为 JSON，这就是事情开始失败的地方。 如果您尝试传递其中包含循环引用的结构，您得到的错误是 $.ajax 将生成的错误。 例如，这将导致 Uncaught RangeError: Maximum call stack size exceeded 错误：

var a = {};
a.foo = a;
$.ajax("/", { data: a, dataType: "json"});

我不熟悉 Telerik，但 get_selectedItems 的文档提到它返回 GridDataItem 对象。 These objects 有一个 get_owner() 方法，它返回包含 GridDataItem 对象的 GridTableView，而 GridTableView 又具有获取它包含的 GridDataItem 对象的方法。这是一个循环引用。

您应该检查所选项目的数组，提取对您的应用程序有意义的标识符并将 this 传递给您的 ajax 调用。

另外，你写道：

当我运行代码时，我的 AJAX 成功触发

不完全是。您已将 success 回调设置为：success: alert('Complete')。然而，这是不正确的。您应该这样设置：success: function () { alert('Complete') }。您必须将函数作为 success 回调传递。你有它的方式，alert 被称为 before $.ajax 开始执行 Ajax 查询，作为成功处理程序传递的是 alert('Complete') 的返回值，即 @987654342 @。