Question

我有一个带有dropzone的注册表单，我想使用插件验证它（字段）。我在dropzone init中调用此插件，在其函数的回调中，我处理dropzone队列并附加表单数据。

问题在于，第一次单击<a id="click">Send</a>按钮时，没有任何反应：它只是输入函数的回调而不执行任何操作（myDropzone无效），只有{{1 （我打算调试）。

这是我正在使用的插件：

console.log()

这是dropzone init：

(function($) {
    $.fn.formly = function(callback) {
        $('a#click').on('click', function() {
            if (callback) {

                var clientInfo = form.find(':input').serializeArray();

                clientInfo.splice(-1, 1);
                clientInfo.splice(-1, 1);

                // Password hash function
                var p = $('#reg_pwd').val(),
                    c = $('#confirm_pwd').val(),
                    shaObj = new jsSHA('SHA-512', 'TEXT');

                shaObj.update(p);
                var p_hash = shaObj.getHash("HEX"),
                    shaObj = new jsSHA('SHA-512', 'TEXT');

                shaObj.update(c);
                var c_hash = shaObj.getHash("HEX");

                callback(clientInfo, p_hash, c_hash);
            }
        });
    };
})( jQuery );

我可以看到控制台中记录的对象。

当我第一次点击按钮时，它就像没有（没有xhr请求）被发送到服务器。

我第二次单击“发送”它确实有效（它发送xhr请求）并得到服务器响应（init: function() { var myDropzone = this; $('#register').formly(function(clientInfo, p_hash, c_hash) { console.log(myDropzone); myDropzone.processQueue(); myDropzone.on('sending', function(data, xhr, formData) { formData.append('client_info', JSON.stringify(clientInfo)), formData.append('particular', 0), formData.append('reg_pwd', p_hash), formData.append('confirm_pwd', c_hash) }); }); myDropzone.on('success', function(file, response) { myDropzone.removeFile(file); console.log( 'Error: ' + response ); }); }）。

为什么它在第一次之后有效？我做错了什么，如何解决这个问题？

Answer 1

我对代码为何如此行事有一个模糊的概念，但我缺乏必要的知识（理论）来正确解释它。

无论如何，我（想）发现了一种正确的方法，我希望它符合良好技术的标准。我现在使用一个函数来填充dropzone init中的作用域对象，以便.on('sending')（应该在插件回调之外）可以访问表单数据：

init: function() {

    var myDropzone = this,
        client = {};

    function getClientData(clientInfo, p_hash, c_hash) {
        client.clientInfo   = clientInfo;
        client.p_hash       = p_hash;
        client.c_hash       = c_hash;
        myDropzone.processQueue();
    };

    $('#register').formly(function(clientInfo, p_hash, c_hash) {

        getClientData(clientInfo, p_hash, c_hash);

    });

    myDropzone.on('sending', function(data, xhr, formData) {
        formData.append('client_info', JSON.stringify(client.clientInfo)),
        formData.append('particular', 0),
        formData.append('reg_pwd', client.p_hash),
        formData.append('confirm_pwd', client.c_hash)
    });

    myDropzone.on('success', function(file, response) {
        myDropzone.removeFile(file);
        console.log( 'Error: ' + response );
    })

}

我很乐意接受另一个解释原始代码行为的答案，并采用更好的方法（如果有的话）。

dropzone - var这不起作用（xhr formdata）在另一个函数的回调中第一次单击

1 个答案: