ajax參數beforeSend請教

ajax

isaepfkeyr 2018-07-31 08:07:37 ‧ 2793 瀏覽

分享至

小弟利用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 }} |

直播中

2 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-07-31 08:48:15

最佳解答

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

在ajax開始前就先執行

$.ajaxSetup({ cache: false }); 
$('#loadingIMG').show(); 
$.ajax({type: 'post',

改用其他jquery alert套件，網路很多可以自行找適合的
https://www.jqueryscript.net/tags.php?/alert/

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

isaepfkeyr iT邦研究生 4 級 ‧ 2018-07-31 08:55:39 檢舉

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

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-07-31 08:57:23 檢舉

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

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

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

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

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

登入發表回應

希希寶

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