ajax调用成功时提交表单，ajax调用失败时阻止提交

Question

我希望能够在 ajax 调用成功时提交表单，而在失败时阻止提交。有没有办法可以做到这一点，但不调用控制器两次？

控制器返回

return File(excelPackage.GetAsByteArray(), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName);

AJAX 调用

//Form contains action : /api/Excel/DownloadExcel
$('#form').on('submit', function (e) {
    var submit = false;
    $.ajax({
        url: '/api/Excel/DownloadExcel',
        type: 'POST',
        data: $('#form').serialize(),
        async: false
    })
        .done(function () {
            submit = true;
        })
        .fail(function (response) {
            displayErrorMessage(response.status, response.responseText);
        });
    return submit;
});

Answer 1

由于您有一个表单并提交它，它会默认基于action 属性向您的服务器发送请求。

问题是您的表单发送了一个请求，然后您还向服务器发送了另一个请求。因此，您在控制器中的操作已收到 2 个请求。

在您的情况下，我建议在向服务器发送请求之前调用方法preventDefault：

$('#form').on('submit', async function (e) {
    // add this line to your event to prevent submiting by default
    e.preventDefault();

    try {
        var file = await $.ajax({
            url: '/api/Excel/DownloadExcel',
            type: 'POST',
            data: $('#form').serialize(),
            async: false
        });

        console.log(file);

        return true;
    } catch (response) {
        displayErrorMessage(response.status, response.responseText);

        return false;
    }
});

我还重写了您的活动以使其清楚。

---

如果你想允许下载文件而不提交，你可以重写事件：

$('#form').on('submit', function (e) {
    e.preventDefault();

    return false;
});

$('#download').on('click', async function (e) {
    e.preventDefault();

    // your ajax code goes here...
});