Jquery:使用confimation提交表单,然后使用回调发布请求

时间:2017-02-06 19:26:55

标签: onclick repeat

很难说很快..但我会尝试...... 我有一个用jquery生成的表单。在这种形式动态填充字段中,我需要发送给PHP:

    function openCropSettings (id) {
        target = '<img src="'+'uploads/'+getCookie("fo_randomPath")+'/'+$("li[data-jfiler-index="+id+"]").find(".fo_item-name").text()+"?timestamp=" + new Date().getTime()+'" id="target" />';
        settings_template = 
        '<div class="fo_target-container">'
            +target+
            '<form class="fo_submit_crop" id="fo_crop-form" onsubmit="return checkCoords();" action="#" >\
                <input type="hidden" id="x" name="x" />\
                <input type="hidden" id="y" name="y" />\
                <input type="hidden" id="w" name="w" />\
                <input type="hidden" id="h" name="h" />\
                <input type="hidden" id="image_id" name="image_id" value="'+id+'"/>\
                <input type="hidden" id="image_name" name="image_name" value="'+image_name+'"/>\
                <input type="hidden" id="path" name="path" value="'+path+'"/>\
                <textarea id="fo_add-crop-comment" name="textarea" placeholder="Can leave a comment here..."></textarea>\
                <input type="submit" id="submitCrop" value="" />\
                <input class="button_cancel" type="button" />\
                <input class="button_rotate" type="button" value="" />\
            </form>\
        </div>';
        $(".fo_crop-settings").html(settings_template);
        $(".fo_crop-settings").css('margin-top', '0px');
        $(target).on('load', function(){
            $('#target').Jcrop({
                boxWidth: limitsW,
                boxHeight: limitsH, 
                allowSelect: false,
                bgOpacity: 0.3,
                onSelect: updateCoords
            }, function(){
                $("#submitCrop").click(function(e){
                    e.preventDefault();
                    $(".fo_confirm").css('margin-top', '0');
                });

                $("#confirm_abort").click(function() {
                    $(".fo_confirm").css('margin-top', '-120px');           
                });

                $("#confirm_confirmation").click(function() {
                    form_data = $(".fo_submit_crop").serialize();
                    $.post('uploader/ajax_upload_file.php', form_data, function(data){
/*
Here I collect PHP respons, that give me a data with new(croped) image properies. And after this, generate new thumb on page with custom function:*/
                        createMask($(thumbMaskPlace), orientations, formatRatio, widthless, data[1], data[2], dontCrop, border);
                        $(target).html(thumbImage);             
                        console.log(data);
                    });             
                });

                $(".button_cancel").click(function() {
                    $(".fo_crop-settings").html('');
                });
            });
        });
    } 

此表单可以在单个会话中多次创建(可能很多次)。问题出现然后我使用它第二,第三和所有下一次。每次,PHP的响应都增加到1.所以..第二次发送表单数据,取两个响应。第三个响应..响应包含当前发送数据的相应重复,看起来像这样(这是函数结束时的console.log(数据)):

controller.js:572 ["0", "700", "469", "hor", "0.67"]

controller.js:572 ["0", "700", "469", "hor", "0.67"]

controller.js:572 ["1", "256", "172", "hor", "0.67"]

controller.js:572 ["1", "256", "172", "hor", "0.67"]

controller.js:572 ["1", "256", "172", "hor", "0.67"]

controller.js:572 ["2", "232", "155", "hor", "0.67"]

controller.js:572 ["2", "231", "155", "hor", "0.67"]

controller.js:572 ["2", "231", "155", "hor", "0.67"]

controller.js:572 ["2", "231", "155", "hor", "0.67"]

PHP每次迭代都会处理它...((( 如果我这样使用它:

$("#submitCrop").click(function() {
e.preventDefault();
                        form_data = $(".fo_submit_crop").serialize();
                        $.post('uploader/ajax_upload_file.php', form_data, function(data)

一切正常......但现在我已经完成了用户流程的确认。

请注意,我故意删除了一些代码行,其中计算变量在表单和代码中进一步使用

那么......我能做些什么,有确认和正确的回应过程?

很抱歉,如果这一切看起来不那么好......我正在努力。

1 个答案:

答案 0 :(得分:0)

问题解决了: unbind()

$("#confirm_confirmation").unbind() //<===here the problem is solved!
$("#confirm_confirmation").click(function() {
form_data = $(".fo_submit_crop").serialize();
$.post('uploader/ajax_upload_file.php', form_data, function(data)......
相关问题