无法在 AJAX 调用之前使用 JS 修改元素

Question

问题：

我无法在网上找到任何关于在 ajax 请求之前和之后更改元素的资源。 如果我有一个id="myText"的<p>元素，如果我想在AJAX请求之前和之后更改该元素的innerHTML ，这是不可能的。

我基本上想在单击按钮时将#myText的文本更改为“正在加载...”，然后运行我的AJAX请求，并在该请求中成功将元素文本从“正在加载...”更改为data ，有效。 但是，“正在加载...”没有显示。

当我检查 devTools 时，我可以看到 innerHTML 确实正在更改为“正在加载...”，但它只是没有显示。 如果我删除AJAX请求，则元素成功更改为“正在加载...”

$(function() {
    $('#uploadBtn').click(function() {
        document.getElementById('myText').innerHTML = 'loading...'
        var form_data = new FormData($('#myForm')[0]);
        $.ajax({
            type: 'POST',
            url: '/flaskFunction',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            success: function(data) {
                document.getElementById('myText').innerHTML = data
            }
        });
    });
});

Answer 1

怎么样，只需在单击时设置值，如果有错误显示或清除元素。

$(function() {
    $('#upload-file-btn2').click(function() {
        var form_data = new FormData($('#myForm')[0]);
        document.getElementById('textArea').innerHTML = 'loading...';
        $.ajax({
            type: 'POST',
            url: '/flaskFunction',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            beforeSend: function() {
            },
            success: function(data) {
                document.getElementById('textArea').innerHTML = data
            },
            error: function(data) {
            
                document.getElementById('textArea').innerHTML = "failed"
           }
        });
    });
});

Answer 2

如果一个 id 为“textArea”的元素是一个实际的textarea标签，那么你不能用 innerHTML 设置它的内容。 你需要使用值，就像任何表单控件一样。

document.getElementById('textArea').value = 'loading...'

Answer 3

我实际上无法让您的示例不起作用😄 是否有可能文本实际上正在更改，但请求执行得如此之快以至于您在屏幕上看不到它？ 如果您可以看到 devtools 中的变化，那么它应该正在发生。 在您的success()函数中尝试此操作，等待 2 秒，然后将文本从'loading...'更改为data ：

setTimeout(function () {
    document.getElementById('myText').innerHTML = data
}, 2000)