無法在 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)