iT邦幫忙

0

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

大家好:
想問一下大大
在網頁查詢時(我抓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會自動消失
謝謝

1 個回答

0

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

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

看更多先前的回應...收起先前的回應...
神威 iT邦新手 2 級 ‧ 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>

https://ithelp.ithome.com.tw/upload/images/20180509/201029830oEFzYBvYW.jpg
他會變成這樣......

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

神威 iT邦新手 2 級 ‧ 2018-05-09 17:00:35 檢舉

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

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

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

對丫,你有alert當然會有畫面跑出來~/images/emoticon/emoticon06.gif

神威 iT邦新手 2 級 ‧ 2018-05-09 18:00:40 檢舉

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

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

神威 iT邦新手 2 級 ‧ 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> 

我要發表回答

立即登入回答