Getting a Maximum call stack size exceeded error,但不确定原因

Getting a Maximum call stack size exceeded error and not exactly sure why

本文关键字:不确定 error exceeded Maximum call stack size Getting      更新时间:2023-09-26

注意这是用于类分配我使用jQuery对API执行ajax调用。代码可以工作并吐出我想要的信息,但是,如果我在浏览器中挂起它一段时间后,我会得到这个错误jquery.js:8459 Uncaught RangeError: Maximum call stack size exceeded。我想我可能有一个无限循环或其他什么东西,但无法确定它。其中包括我的脚本js和相关的index.html。我认为错误特别出现在getDoughnuts-ajax调用中,但我对此不持肯定态度。谢谢你的帮助。

Javascript文件

$(document).ready(function() {
  $("form#new-doughnut").on('submit', postDoughnut);
  getDoughnuts();
});
function getDoughnuts() {
$.ajax({
        url: 'http://api.doughnuts.ga/doughnuts',
        method: 'GET',
        dataType: 'json'
    })
    .done(function(data, textStatus) {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            addDoughnut(data[i]);
        }
    })
    .fail(function(data, textStatus) {
        console.log("ERROR getting doughtnuts. status: " + textStatus);
    });
}

function postDoughnut(event) {
  event.preventDefault();
  var doughnut = {
    style: $('form#new-doughnut select#doughnut-style').val(),
    flavor: $('form#new-doughnut select#doughnut-flavor').val()
};
$.ajax({
        url: 'http:api.doughnuts.ga/doughnuts',
        method: 'post',
        dataType: 'json',
        data: event
    })
    .done(function(data, textStatus) {
        addDoughnut(data);
    })
    .fail(function(data, textStatus) {
        console.log("ERROR getting doughnuts. status: " + textStatus);
    });
$('form#new-doughnut input#doughnut-flavor').val(null)
}

function addDoughnut(doughnut) {
  $("ul#doughnuts").prepend("<li>" + doughnut.flavor + " - <em>" +    doughnut.style + "</em></li>")
}

HTML文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>The Doughnut Shop</title>
        <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <h1>Doughnut Shop</h1>
  <form id="new-doughnut">
    <input type="text" name='doughnut[flavor]' id="doughnut-flavor" placeholder="What type of doughnut?" value="Chocolate">
    <select name="doughnut[style]" id="doughnut-style">
        <option value="Old Fashioned">Old Fashioned</option>
        <option value="Cake">Cake</option>
        <option value="French Cruller">French Cruller</option>
        <option value="Yeast">Yeast</option>
    </select>
    <input type="submit" value='Save My Doughnut'>
  </form>
</body>
<ul id="doughnuts">
</ul>
<script src="js/script.js"></script>

问题是因为您将event对象作为数据提供给了jQuery.ajax,这是一个循环结构,而jQuery无法处理循环数据对象。尝试链接以下行:

    data: event

至:

    data: doughnut

编辑:以下url的格式也不正确:

    url: 'http:api.doughnuts.ga/doughnuts',