如何在ajax提交后提交表單。

Question

我的頁面上有svg，它們已轉換為畫布，然后成功發布了html2canvas數據。 我遇到的麻煩是在發布html2canvas數據后讓表單提交。 我試圖簡單地使用

$('#chartInfo').submit()

在AJAX中是成功還是錯誤，但是不會執行。 因此，我嘗試使用下面的遞延提交表單，但是我收到的ajaxDfd是未定義的嗎？ 我不確定我要去哪里錯了。 我猜是因為我在ajax中使用了延遲？

$(document).ready(function() {

    $( '#save_dashboard' ).click(function() {

        // Declare an array to store all deferred objects from each svg element
        var svgDfds = [],
            ajaxDfd
            targetElem = $('#contentzone-outer');

        targetElem.find('svg').each(function() {
            var dfd = new $.Deferred(),
                svg = $(this),
                canvas = $('<canvas></canvas>');

            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title='hide\/show'/g, '');
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');

                // Resolve or reject the deferred
                dfd.resolve(context.drawImage(image, 0, 0));
            };

            // Push deferred object into array
            svgDfds.push(dfd);

        }); // end of targetElem.find('svg').map(function() {...});

        // Check for all deferreds
        $.when.apply($, svgDfds).then(function(_canvas) {
            console.log('svgDfds resolve done', _canvas);
            ajaxDfd = new $.Deferred();

            $('#contentzone-outer').html2canvas({
                onrendered: function (canvas) {
                    //Set dashboardPng value to image data (base-64 string)
                    var dashboardPng = canvas.toDataURL('image/png');
                    console.log('dashboardPng: ' + dashboardPng);

                    $.ajax({
                        url:'save_dashboard_image.php',
                        data:{dashboardPngData: dashboardPng},
                        type:'POST',
                        dataType:'json',
                        success: function(){
                            console.log('success');
                        }
                        ,
                        error: function(xhr, status, error){
                            console.log('The requested page was: ' + document.URL +
                                '. The error number returned was: ' + xhr.status +
                                '. The error message was: ' + error);
                        }
                    })
                    .done(function(){
                        console.log('AJAX success()');
                    })
                    .always(function(){
                        ajaxDfd.resolve(console.log('AJAX complete()'));
                        return ajaxDfd.promise();
                    })
                    .fail(function(){
                        console.log('AJAX error()');
                    }); // end of save_dashboard_image.php
                } // end of html2canvas
            }); // end of onrendered
        }); // end of $.when.apply($, svgDfds).then(function(_canvas) {...}

        ajaxDfd.done(function(){
            $('#chartInfo').submit();
        });
    }); // end of save_dashboard click function
}); // end of document ready

Answer 1

    // Declare an array to store all deferred objects from each svg element
    var svgDfds = [],
        ajaxDfd
        targetElem = $('#contentzone-outer');

您忘了'ajaxDfd'之后的逗號。

更新：您正在嘗試將方法調用完成

    $.when.apply($, svgDfds).then(function(_canvas) { .. }

我認為這是異步的（=> ajaxDfd在閱讀ajaxDfd.done（...）的那一刻仍未定義。您為什么不嘗試放入（也許在底部）

    $.when.apply($, svgDfds).then(function(_canvas) { 
      .....
      ajaxDfd.done(function(){
          $('#chartInfo').submit();
      });
     } 

Answer 2

我使用普通的舊ajax，而不是嘗試使用Submit（），無論如何它都能解決問題。

$(document).ready(function() {

    $( '#save_dashboard' ).click(function() {

        var chartInfoSerialized = $('#chartInfo').serialize();
        console.log('chartInfoSerialized: ' + chartInfoSerialized);

        $.ajax({
            url:'createDashboard_and_ReportPair.php',
            data: chartInfoSerialized,
            type:'POST',
            dataType:'json',
            success: function(){
                console.log('createDashboard_and_ReportPair.php success');
            },
            error: function(xhr, status, error){
                console.log('The requested page was: ' + document.URL +
                    '. The error number returned was: ' + xhr.status +
                    '. The error message was: ' + error);
            }
        }) // end of POST request to createDashboard_and_ReportPair.php
        .always(function() {
            console.log('AJAX complete createDashboard_and_ReportPair.php');

        });

        // Declare an array to store all deferred objects from each svg element
        var svgDfds = [],
            ajaxDfd,
            targetElem = $('#contentzone-outer');

        targetElem.find('svg').each(function() {
            var dfd = new $.Deferred(),
                svg = $(this),
                canvas = $('<canvas></canvas>');

            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title='hide\/show'/g, '');
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');

                // Resolve or reject the deferred
                dfd.resolve(context.drawImage(image, 0, 0));
            };

            // Push deferred object into array
            svgDfds.push(dfd);

        }); // end of targetElem.find('svg').map(function() {...});

        // Check for all deferreds
        $.when.apply($, svgDfds).then(function(_canvas) {
            console.log('svgDfds resolve done', _canvas);
            ajaxDfd = new $.Deferred();

            $('#contentzone-outer').html2canvas({
                onrendered: function (canvas) {
                    //Set dashboardPng value to image data (base-64 string)
                    var dashboardPng = canvas.toDataURL('image/png');
                    console.log('dashboardPng: ' + dashboardPng);

                    $.ajax({
                        url:'save_dashboard_image.php',
                        data:{dashboardPngData: dashboardPng},
                        type:'POST',
                        dataType:'json',
                        success: function(){
                            console.log('success');
                        }
                        ,
                        error: function(xhr, status, error){
                            console.log('The requested page was: ' + document.URL +
                                '. The error number returned was: ' + xhr.status +
                                '. The error message was: ' + error);
                        }
                    })
                    .done(function(){
                        console.log('AJAX success()');
                    })
                    .always(function(){
                        ajaxDfd.resolve(console.log('AJAX complete()'));
                        // return ajaxDfd.promise();
                        $('#chartInfo').submit();
                    })
                    .fail(function(){
                        console.log('AJAX error()');
                    }); // end of save_dashboard_image.php
                } // end of html2canvas
            }); // end of onrendered
        }); // end of $.when.apply($, svgDfds).then(function(_canvas) {...}
    }); // end of save_dashboard click function
}); // end of document ready