JavaScript RangeError -使用jQuery.post时超过了最大调用堆栈大小

JavaScript RangeError - Maximum call stack size exceeded when using jQuery.post

本文关键字:过了 调用 堆栈 RangeError 使用 jQuery post JavaScript      更新时间:2023-09-26

当使用jQuery的。post()函数提交我的表单数据时,我得到了一个未捕获的RangeError:最大调用堆栈大小超过。

我知道这通常意味着递归,但我看不出递归在哪里发生。

我已经把post请求放入函数(submitRequest())中,这样我就可以从代码中的2个不同点提交数据。它最初驻留在提交事件中,当时工作得很好。当我把它移到外面时,错误就出现了。

任何想法?

JavaScript代码(带有注释日志,以便您可以看到流程):

$(document).ready(function() {
    var downloadLink = '',
        downloadName = '',
        details,
        detailsSaved = false;
    $('.js--download').click(function(event) {
        var self = $(this);
        event.preventDefault();
        downloadLink = self.data('filePath'); // Store clicked download link
        downloadName = self.closest('.brochure').find('.brochure__name').html().replace('<br>', ' ');
        if (!detailsSaved) {
            $('#brochure-section').addClass('hide');
            $('#capture-section').removeClass('hide');
            $('html, body').animate({
                scrollTop: $("#capture-section").offset().top
            }, 500);
        } else {
            submitRequest();
        }
        return false;
    });
    $(".submit-btn").click(function(event) {
        var antiSpam = $('input[name=url]').val();
        if (antiSpam != "") {
            outputResultText('Error - Please leave the spam prevention field blank', 'error');
            proceed = false;
            event.preventDefault();
            return false;
        }        
        var name = $('input[name=name]').val(),
            company = $('input[name=company]').val(),
            email = $('input[name=email]').val(),
            phone = $('input[name=phone]').val(),
            proceed = true;
        if(name==""){
            $('input[name=name]').addClass("error");
            proceed = false;
        }
        if(phone==""){
            $('input[name=phone]').addClass("error");
            proceed = false;
        }
        if(email==""){
            $('input[name=email]').addClass("error");
            proceed = false;
        }
        if(!proceed) {
            outputResultText('Please check all required fields', 'error');
            event.preventDefault();
            return false;
        }
        event.preventDefault();
        if(proceed) {
            console.log('About to request'); // Logged out
            submitRequest();
        }
        return false;
    });
    //reset previously set border colors and hide all message on .keyup()
    $("input, textarea").keyup(function() {
        $(this).removeClass("error");
        $(".form-result").fadeOut(100);
    });
    function submitRequest () {
        console.log('Start submitRequest'); // Logged out
        if (!detailsSaved) {
            console.log('Details are NOT saved');
            post_data = {
                'name': name,
                'company': company,
                'phone': phone,
                'email': email,
                'brochure': downloadName,
                'brochure_url': downloadLink
            };
            details = post_data;
        } else {
            console.log('Details are saved');
            post_data = details;
            post_data['brochure'] = downloadName;
            post_data['brochure_url'] = downloadLink;
        }
        console.log('Posting data'); // Logged out
        // CRASH: Uncaught RangeError: Maximum call stack size exceeded 
        $.post(bcf_local_args['post_url'], post_data, function(response){ 
            console.log('Response received');
            if(response.type != 'error') {
                if (detailsSaved) {
                    outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.<br>Want it sent to a different email? Simply refresh the page and try again.");
                } else {
                    //reset values in all input fields
                    $('#brochure-capture-form input').val('');
                    $('#brochure-capture-form textarea').val('');
                    $('#capture-section').addClass('hide');
                    $('#brochure-section').removeClass('hide');
                    outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.");
                }
                if (!detailsSaved) {
                    detailsSaved = true;
                }
                $('html, body').animate({
                    scrollTop: $(".brochure__alert").offset().top
                }, 500);
            } else {
                outputResultText(response.text, response.type); 
            }
        }, 'json');
    }
    function outputResultText (text, status) {
        var output = '';
        if(status == 'error') {
            output = '<div class="error">'+text+'</div>';
        } else {
             output = '<div class="success">'+text+'</div>';
        }
        $(".form-result").hide().html(output).fadeIn(250);
    }
    function outputAlert (text) {
        var output = '<div>'+text+'</div>';
        $('.brochure__alert').hide().removeClass('hide').html(output).slideDown(250);
        setTimeout( function() {
            $('.brochure__alert').slideUp(250);
        }, 6500);
    }
    // function accessStorage(action, dataKey, dataValue) {
    //     if(typeof(Storage) === "undefined") {
    //         // No support for localStorage/sessionStorage.
    //         return false;
    //     } 
    //     if (action == 'store') {
    //         localStorage.setItem(dataKey, dataValue);
    //     } else if (action == 'retrieve') {
    //         return localStorage.getItem(dataKey);
    //     }
    // }
});

我不知道你是否已经找到了解决方案,但我有"相同"的问题。

在我的代码中,我有这个函数,我在上传图像后调用,我将图像名称作为参数传递给我的POST数据所需的其他参数。

经过一番研究,我发现浏览器在传递参数方面有一些限制,所以问题不是AT $。Post but in my function calling.

我不知道技术术语,但是我"过度使用堆栈参数"。

所以也许你的问题不在你的$。Post任意一个,但是要超过堆栈。

希望对你有帮助。

[]的