javascript - 当我单击按钮时，它仅在第一个单击时在输出 div 'mouse_move' 上显示带有 jQ​​uery ajax 的图像，但在另一次单击时不显示相同的图像

Question

我在按钮单击时遇到图像渲染设施问题，仅在第一个图像上在输出 div 上显示图像，但在另一次单击时不显示相同的更改，我正在为图像 meme 编写代码，以便我可以在图像上写入文本，给出一些效果。它仅按照我上面所说的单击“我序列化表单数据”时第一次显示图像。之后我通过 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" />';

但内部一切都很顺利。图像已按照我的要求成功更新。

Answer 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(
...