问题:
我在网上找不到任何关于在 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
}
});
});
});
4条答案
按热度按时间qlfbtfca1#
这个怎么样,只要设置值点击,如果有一个错误显示它或只是清除元素。
8zzbczxx2#
如果一个id为“textArea”的元素是一个实际的
textarea
标签,那么你不能用innerHTML设置它的内容。您需要使用值,就像任何表单控件一样。myzjeezk3#
我实际上不能让你的例子不工作😄,有没有可能,文本实际上是改变,但请求执行得如此之快,你只是没有看到它在屏幕上?如果你能看到devtools中的变化,它应该正在发生。在
success()
函数中尝试以下操作,等待2秒钟,然后将文本从'loading...'
更改为data
:5us2dqdw4#
我也遇到了同样的问题。问题是,您使用'async:如果您这样做,Web浏览器的UI进程将挂起,并将在 AJAX 调用完成后继续工作。我看到两种可能性:
1.不使用 *async:错误 *
1.将AJAX部分移动到函数中,并使用setTimeout触发代码。示例:
}
现在通过以下方式调用该函数:
超时1对我来说已经足够了。