AJAX表单发送两次，第二次以第一次响应为URL

Question

我需要异步发送表单。所以我写了一些代码。

<form method="post" action="" enctype="multipart/form-data" id="generate_params">
    <input type="hidden" name="campaign_id" value="202">
    <input type="hidden" name="action" value="AJAX_BANNERS_GENERATE">
</form>

<input type="submit" value="Generate" form="generate_params">

$(document).ready(function () {
    $("#generate_params").submit(function (e) {
        generateBanners();
        e.preventDefault();
        return false;
    });
});

function generateBanners() {
    var data = $("#generate_params").serializeArray();

    $.ajax({
        data: data,
        success: function (url) {
            $('#banners_gen').html('');
            $('#banners_gen').append($('<img>', {src: url}));
        }
    });
}

但是有一个问题。请求发送2次，第二次请求url ...作为第一个请求的响应。这是我见过的最奇怪的行为。

所以我用Google搜索了一下。有人说我应该在$(this).unbind()处理程序中submit()。但是我需要在将来发送表单而不重新加载页面。所以我需要重新绑定处理程序。但对我来说似乎不正确。还有另一种解决方法吗？实际上发生了什么？

更新

处理操作的服务器端代码

$userPath = 'user/banners/generated';
$directory = $USER_FILE_DIR . $userPath;

$bannerName = Banner::generateFromTemplate($directory);

echo $USER_URL_PATH . "/" . $userPath . "/" . $bannerName;

exit(0);

Answer 1

然后你不需要表格。

<p id="generate_params">    
    <input type="hidden" name="campaign_id" value="202">
    <input type="hidden" name="action" value="AJAX_BANNERS_GENERATE">
</p>
<input type="button" id="generate_params_button">

$("#generate_params_button").on('click', function () {
    generateBanners();
});

...

Answer 2

您只需要更改

<input type="submit" value="Generate" form="generate_params">

到

<input type="button" value="Generate" form="generate_params">