如何在網頁查詢時顯示小圖示

html

神威 2018-05-09 15:13:11 ‧ 4225 瀏覽

大家好:
想問一下大大
在網頁查詢時(我抓SQL的資料比較多，比較慢)
所以我想要在等待時放個小圖示(EX:wait....或漏斗圖示....
該用甚麼做會比較好?


 <body>
<div class="container">
<form method=post action=line2.jsp>      
<input type="checkbox" name="year" multiple="multiple" value="2016"> 2016
<input type="checkbox" name="year" multiple="multiple" value="2017"> 2017 
<input type="checkbox" name="year" multiple="multiple" value="2018"> 2018
 </font>
<input type=submit name=submit id=submit Value="查詢">
     
</form> 
</div>
    <div id="chart"></div>

我想要 chart這裡我按查詢時會顯示wait...，直到圖表show出來wait會自動消失
謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-05-09 15:25:58

如果是使用jQuery 可以參考以下內容：

[程式][JQuery] 讓AJAX運作的時候，跳出loding的訊息。－Part 1
https://goo.gl/KbSj9P
[程式][JQuery] 讓AJAX運作的時候，跳出loding的訊息。－Part 2
https://goo.gl/nzNdvZ

回應 8
分享
檢舉

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

神威 iT邦研究生 4 級 ‧ 2018-05-09 16:41:23 檢舉

我試著照抄(但我是JSP)，結果不行....

  <script>
var Submit=function(){
var URLs="line2.jsp";
$.ajax({
url: URLs, data: $('#sentToBack').serialize(), type:"POST", dataType:'text', success: function(msg) {
alert(msg);},
beforeSend:function(){
$('#loadingIMG').show;},
complete:function(){
$('#loadingIMG').hide();},
error:function(xhr, ajaxOptions, thrownError){
alert(xhr.status); alert(thrownError);}
});}
</script>

  <form id="sentToBack">
<input type="text" name="Text"/>
<input type="button" value=" 4" onclick="Submit()"/>
  </form>
<div id="loadingIMG" style="display:none"><img src="loading.gif" height='14'/>
. </div>

他會變成這樣......

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-05-09 16:44:07 檢舉

你的line2.jsp 寫了什麼？
show後面要有括號
$('#loadingIMG').show();

神威 iT邦研究生 4 級 ‧ 2018-05-09 17:00:35 檢舉

kksugsay
你好:
我line2.jsp寫的是統計圖表
我從SQL裡面抓每個月的銷售額加總統計
並且做成圖表(確定是可以跑的)
但是加了那些程式碼後我上面留言的圖示...(雖然圖還是會顯示啦
但想知道錯在哪?
謝謝

fillano iT邦超人 1 級 ‧ 2018-05-09 17:13:48 檢舉

那個畫面是alert(msg)跑出來的。

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-05-09 17:38:47 檢舉

對丫，你有alert當然會有畫面跑出來～

神威 iT邦研究生 4 級 ‧ 2018-05-09 18:00:40 檢舉

對不起眼殘了，刪掉alert(msg)就沒事了
但他還是不會出現wait....或是loading...的字樣阿...

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-05-10 09:24:26 檢舉

範例是用圖片喔～要出現wait....或是loading...的字樣
要在 beforeSend 裡改成
$('#loadingIMG').show();
$('#loadingIMG').text('wait...');

神威 iT邦研究生 4 級 ‧ 2018-05-11 15:17:11 檢舉

kksugsay 大大好:
抱歉很晚才回，最近太忙了...
我改了還是沒反應耶.....

  <script>   
var Submit=function(){
var URLs="line2.jsp";
$.ajax({
url: URLs, data: $('#sentToBack').serialize(), type:"POST", dataType:'text', success: function(msg) {
},
beforeSend:function(){
$('#loadingIMG').text('wait...');},
complete:function(){
$('#loadingIMG').hide();},
});}
</script>

    </head>
 <body>
<div class="container">
<form method=post action=line2.jsp>   
<input type="checkbox" name="year" multiple="multiple" value="2016"> 2016
<input type="checkbox" name="year" multiple="multiple" value="2017"> 2017 
 </font>
 <input type=submit name=submit id=submit Value="送出" onclick="Submit()">    
</form> 
</div>
<form id="sentToBack">
<div id="loadingIMG" style="display:none">wait...</div>  
</form>
  <div  id="chart" ></div>

登入發表回應