iT邦幫忙

0

ajax參數beforeSend請教

小弟利用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('連線異常!!!'); } 
    })
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
最佳解答

如果在beforeSend做還是不行,那提供兩種方式:

  1. 在ajax開始前就先執行
$.ajaxSetup({ cache: false }); 
$('#loadingIMG').show(); 
$.ajax({type: 'post',
  1. 改用其他jquery alert套件,網路很多可以自行找適合的
    https://www.jqueryscript.net/tags.php?/alert/
看更多先前的回應...收起先前的回應...
isaepfkeyr iT邦研究生 4 級 ‧ 2018-07-31 08:55:39 檢舉

您好,我有試過在ajax前就先執行,結果是一樣的,甚至設過timeout,也是一樣的結果,單純用html的alert又未造成使用者需要點確定,其他jquery alert也會造成使用者需要點確定才能繼續嗎??

又未造成使用者需要點確定? html的alert才會一定要點確定才能繼續吧,jquery alert等於是自訂,你想要什麼效果,理論上都可以做到

isaepfkeyr iT邦研究生 4 級 ‧ 2018-08-02 08:09:55 檢舉

這兩天剛好忙~同事辦離職,謝謝您的回覆 我在測試看看,其實只是要跳出個訊息讓user知道而已

isaepfkeyr iT邦研究生 4 級 ‧ 2018-08-03 12:33:31 檢舉

謝謝您的幫忙,因暫時沒時間測,我先選正解

0
希希寶
iT邦新手 4 級 ‧ 2023-05-25 15:16:16

雖然過了幾年,但剛好也遇到類似情況,補充一下我自己的作法。

問題出在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('連線異常!!!'); } 
    })

我要發表回答

立即登入回答