jQuery ajax post Uncaught RangeError: 超出最大调用堆栈大小答案

【问题标题】：jQuery ajax post Uncaught RangeError: Maximum call stack size exceededjQuery ajax post Uncaught RangeError: 超出最大调用堆栈大小
【发布时间】：2016-10-19 09:28:24
【问题描述】：

我对 jQuery ajax 有疑问。我有 javascript

 <script type="text/javascript">
    $(function() {
        $('body').on("click", "#pager a", function(e) {
            e.stopPropagation();
            e.preventDefault();
            var a = $(this);
            var model = $('#searchForm').serialize();
            $.ajax({
                url: '/Product/Products',
                type: 'POST',
                data: {
                    model: model, page: a
                },
                success: function (data) {
                    alert('success');
                    $('#productsList').html(data);
                }
            });
        });
    });
</script>

此代码产生错误“未捕获的 RangeError：超出最大调用堆栈大小”，我不明白为什么。我没有触发器，我使用了 preventDefault 和 stopPropagation，但我仍然有这个错误。谁能帮帮我？

【问题讨论】：

真的很奇怪。我完全看不出为什么这段代码会产生这种情况。你在其他地方没有任何其他代码吗？
您可以编辑您的问题并添加您的 HTML 吗？帮助我们重现错误。
您将page: a 作为您提交的数据的一部分，其中a 是一个jQuery 对象-您希望它做什么？
页面上有多少个<a>（即嵌套在#pager 中）？发布您的html。 #pager 听起来像是一种分页。例如，如果您的分页显示中有数千个页面（例如 ?page=1, ?page=2, 50, 100, 1000），均以 <div id="#pager"><a href="?page=2">...<a href="?page=10000"></div> 引用，则绑定~x <a> 元素上的点击处理程序可以轻松填充堆栈。

标签： javascript jquery

【解决方案1】：

我想分享我的经验，

在我的情况下，这只是一个错误的参数名称和完全相同的错误消息：而不是 confID，我输入了 configID 并得到了这个错误。

 function openNameEditor() {
    var confID = $("#configStatusList").attr("data-id");
    debugger;
    $.ajax({
        url: '@Url.Action("GetModelNameToChange", "Admin")',
        type: "GET",
        dataType: "HTML",
        data: { configID: configID},//Here, instead of confID, I put configID which doesn't exist in the function.
        success: function (response) {
            $("#name-editor").html(response);
        },
        error: function (er) {
            alert(er.error);
        }
    });

}

【讨论】：

【解决方案2】：

我在使用 jquery.tmpl.js 解析一大段 JSON 时遇到了这样的问题。使用 concat() 函数处理大型数组时会出现此错误。这是问题的链接：https://bugs.chromium.org/p/chromium/issues/detail?id=103583 这个问题自 2011 年以来一直没有解决。为了解决它，我不得不编辑 jquery-3.3.1.js javascript 库文件。对于那些想要重复此决定的人，请执行以下操作：在库文件 return concat.apply ([], ret); 中找到以下行并将其替换为以下代码。

        // Flatten any nested arrays
        if ([].flat) return ret.flat();


        var ret2 = [];

        ret.forEach(function (i) {

            if (i instanceof Array) {

                i.forEach(function (i2) {
                    ret2.push(i2);
                });

            } else {
                ret2.push(i);
            }

        });

        return ret2;

        // original code:
        // return concat.apply([], ret);
        // chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=103583

我们检查浏览器库中是否有 flat() 函数，例如，它有一个 chrome 浏览器，如果有 - 只需合并数据数组 - 就不需要更多了。如果没有，浏览器会走慢一点，但至少不会出错。

【讨论】：

【解决方案3】：

无限循环也可能导致此类错误。查看您没有在函数内部调用相同的函数。

【讨论】：

【解决方案4】：

如果您在该范围内未定义的数据中传递某些内容，也会出现此错误。另一个原因是直接用 val() 传入数据。

【讨论】：

谢谢！我直接使用 .val() 传递数据，但在一个属性中我忘记添加 .val()，您的评论为我节省了很多时间！
非常感谢，确实是.val()
在急于开发代码时俯瞰 .val() .. 很好。

【解决方案5】：

不要使用 var a = $(this) 来获取页面，而是使用一个隐藏字段并将页面值赋予该字段。

<input type="hidden" value="xyzpage" id="pageValue">

var pageVal = $("#pageValue").val();

data: {
         model: model, page:pageVal 
      },

这会解决我猜的问题

【讨论】：

【解决方案6】：

您需要关闭var a = $(this);。我不知道你试图在那里实现什么，但使用 jQuery 包装的 clicked 元素作为请求数据是无意义的。

【讨论】：

"使用事件上下文（由 this 表示）作为 jQuery 选择器" - 但是this 不是事件，它是一个参考到事件发生的元素。
是的，你说得对，我的错。但是仍然尝试发送一个 jQuery 包装的元素作为请求数据很奇怪。
这很奇怪，当然，但这可能与 maximum call stack 错误无关。
我在codepen 中进行了测试，显然你是对的。出于某种原因，在 ajax 调用中发送一个 jQuery 对象会使它变得混乱。无论如何，当您说将整个 jQuery 对象发送到任何地方没有任何意义时，您也是对的，因为它根本没有:)