Question

我对JS并不熟悉并且对下一个任务感到困惑。

我有远程表单，但在发送数据之前我需要做一些操作（用数据填充表单输入）。这是我的代码：

$('.edit_slide').on('ajax:beforeSend', function(event, xhr, settings) {
    html2canvas($('.slide_canvas'), {
      onrendered:
        function(canvas) {
            var img = canvas.toDataURL("image/png");
            $('#slide_thumbnail').val(img);
        }
    });
});

从https://github.com/rails/jquery-ujs/wiki/ajax形成ajax。

接下来我需要使用html2canvas（http://html2canvas.hertzen.com/documentation.html）从DIV创建图像并将其传递给服务器。

但首先发送表单，然后执行html2canvas（使用空白#slide_thumbnail进行表单，然后填入数据）。

如果我放在这里警告（'你好'）而不是html2canvas，警报首先工作，它正在等待我按'确定'并在之后提交。

是否可以等待图像创建并在之后发送？

Answer 1

这也可以应用（DEMO）：

$("form").on('submit', function(e) {
    e.preventDefault(); // prevent form submission
    console.log('Submit Prevented...');

    // do stuf, i.e.
    html2canvas($('.slide_canvas'), {
        onrendered : function(canvas) {
            var img = canvas.toDataURL("image/png");
            $('#slide_thumbnail').val(img);

            // Submit using ajax
            $.ajax({
                type : 'post',
                url : 'your_url',
                data : { html : $('#slide_thumbnail').val() },
                success : function(data){
                    console.log('Data returned fron the server : ' + data);
                }
            });
        }
    });
});

Answer 2

您的问题是html2canvas立即返回，设置稍后调用的回调。在ajax调用完成后调用回调。

解决方案：

在ajax发送之前让表单调用html3canvas，然后在onrendered回调之后调用ajax send。（这是表格上的javascript）
等待ajax send函数内的回调。（http://api.jquery.com/category/deferred-object/）

JS：等待函数内部完成的方法

2 个答案: