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

webghufk  于 2023-05-28  发布在  jQuery
关注(0)|答案(4)|浏览(138)

问题:

我在网上找不到任何关于在 AJAX 请求前后更改元素的资源。如果我有一个<p>元素,其中包含id="myText",如果我想在AJAX请求之前和之后更改该元素的innerHTML,这是不可能的。
我基本上想在点击按钮时将#myText的文本更改为“loading...”,然后运行我的AJAX请求,在该请求中,成功后,它将元素文本从“loading...”更改为data,这可以工作。但是,“加载中...”未显示。
当我检查devTools时,我可以看到innerHTML确实正在更改为“Loading...”,但它就是不显示。如果我删除AJAX请求,则元素成功更改为“loading...”

$(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
            }
        });
    });
});
qlfbtfca

qlfbtfca1#

这个怎么样,只要设置值点击,如果有一个错误显示它或只是清除元素。

$(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"
           }
        });
    });
});
8zzbczxx

8zzbczxx2#

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

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

myzjeezk3#

我实际上不能让你的例子不工作😄,有没有可能,文本实际上是改变,但请求执行得如此之快,你只是没有看到它在屏幕上?如果你能看到devtools中的变化,它应该正在发生。在success()函数中尝试以下操作,等待2秒钟,然后将文本从'loading...'更改为data

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

5us2dqdw4#

我也遇到了同样的问题。问题是,您使用'async:如果您这样做,Web浏览器的UI进程将挂起,并将在 AJAX 调用完成后继续工作。我看到两种可能性:
1.不使用 *async:错误 *
1.将AJAX部分移动到函数中,并使用setTimeout触发代码。示例:

function theNewFunction() {
 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
     }
 });

}
现在通过以下方式调用该函数:

$(function() {
    $('#uploadBtn').click(function() {
        document.getElementById('myText').innerHTML = 'loading...'
        setTimeout(theNewFunction, 1);
    });
});

超时1对我来说已经足够了。

相关问题