小弟利用ajax做資料及圖片上傳,想再上傳前,跳一個loading訊息
於是利用ajax的beforeSend及complete去做div的dsiplay切換
如果beforeSend裡面是alert則可正常再送出去之前跳出訊息
若beforeSend裡面是$('#loadingIMG').show();,則會等到跳出alert(data.msg)
的訊息後$('#loadingIMG').show()才會有效果,要如何才能在beforeSend時就可讓
$('#loadingIMG').show()產生效果
程式碼如下
html
<input id="btn_up" type="button" value="資料送出" onclick="uploadData();" />
<div id="loadingIMG" style="display:none">
<img src="../images/loading.gif" height='14' />資料處理中,請稍後。
</div>
Javascript
$.ajaxSetup({ cache: false });
$.ajax({type: 'post',
async: false,
url: "....",
data: '....',
beforeSend: function () {
$('#loadingIMG').show(); },
complete: function () {
$('#loadingIMG').hide(); },
success: function (result) {
var data = eval('(' + result + ')');
if (data.success) {
$('#loadingIMG').hide();
alert(data.msg) }
else { $('#k_ec_nam_item').val(''); } },
error: function () { alert('連線異常!!!'); }
})
如果在beforeSend做還是不行,那提供兩種方式:
$.ajaxSetup({ cache: false });
$('#loadingIMG').show();
$.ajax({type: 'post',
雖然過了幾年,但剛好也遇到類似情況,補充一下我自己的作法。
問題出在async設定成false,造成同步處理,UI跟JS互斥,進到beforeSend時div的設置被擋住才看不到效果。
以此篇為例,JS的部分可以試試將async改成true
$.ajaxSetup({ cache: false });
$.ajax({type: 'post',
async: true, // ←更改成true,或拿掉這段
url: "....",
data: '....',
beforeSend: function () {
$('#loadingIMG').show(); },
complete: function () {
$('#loadingIMG').hide(); },
success: function (result) {
var data = eval('(' + result + ')');
if (data.success) {
$('#loadingIMG').hide();
alert(data.msg) }
else { $('#k_ec_nam_item').val(''); } },
error: function () { alert('連線異常!!!'); }
})