当我点击按钮时,它会在输出div'mouse_move'上显示带有jQuery ajax的图像仅用于第一个但在另一个点击时不显示相同

时间:2014-09-06 06:08:00

标签: javascript php jquery ajax

我的输出div上的按钮单击显示图像上的图像渲染功能只有第一个但是在另一次点击时没有显示相同的问题我正在做图像模因的代码,这样我就可以在图像上写文字了给出一些效果。它只是第一次显示图像,因为我在上面说了点击我序列化表格数据。之后我通过jQuery ajax调用传递到ajaxfunctions页面。

var data = {
    'field_name': 'formdata',
    'outer_offset_left': offset.left,
    'outer_offset_top': offset.top,
    'drag_offset_left': dragOffset.left,
    'drag_offset_top': dragOffset.top,
    'drag_offset_left2': dragOffset2.left,
    'drag_offset_top2': dragOffset2.top,
    'outer_width': outerWidth,
    'outer_height': outerHeight,
    'drag_width': dragWidth,
    'drag_height': dragHeight,
    'drag_width2': dragWidth2,
    'drag_height2': dragHeight2,
    'fontsize': font_size,
    'fontsize2': font_size2,
    'file_name_path': file_path,
    'file_background_url': outer_bg_url,
    'file_background_color': outer_bg_color,
    'drag_text': drag_text,
    'drag_text2': drag_text2,
    'font_type': font_type,
    'font_type2': font_type2,
    'shadow_val': shadow_val,
    'cap_val': cap_val
};

data = $('#my-form').serialize() + "&" + $.param(data);

$.ajax({
    type: "POST",
    dataType: "html",
    url: "source/ajax-functions.php",
    //Relative or absolute path to response.php file      
    data: data,
    success: function (data) {
        setTimeout(function () {
            $("#mouse_move").css({
                'display': 'block'
            }).html(data);
        }, 200);        
    }    
});

在ajax-functions.php上我刚刚更新后回显图像,但它会显示它第一次生成的输出。

echo '<img src="'.$pathToImage.'custom_Text_image.jpg" />';

但内心一切都很顺利。图像已成功更新,我想要。

1 个答案:

答案 0 :(得分:1)

这一行:

data = $('#my-form').serialize() + "&" +  $.param(data);  

会在每次运行时第二次将当前表单添加到data。它只能正常运行一次。

假设,data="abc"

// 1
data = $('#my-form').serialize() + "&" +  $.param(data);  
// <formadata>&abc

 // 2
data = $('#my-form').serialize() + "&" +  $.param(data);  
// <formadata>&abc<formdata>&abc

// etc.

变化:

datatosend = $('#my-form').serialize() + "&" +  $.param(data);  

$.ajax({ 
                   type: "POST",      
                   dataType: "html",      
                   url: "source/ajax-functions.php", 
                   //Relative or absolute path to response.php file      
                   data: datatosend,      
                   success: function(
...