台灣最大程式設計社群網站
線上人數
2414
 
會員總數:246497
討論主題:190005
歡迎您免費加入會員
討論區列表 >> ASP.NET >> 如何在自動更新時, 網頁不會一閃一閃的
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
如何在自動更新時, 網頁不會一閃一閃的
價值 : 80 QP  點閱數:2535 回應數:4
樓主

Wendy
初學者
3 17
522 26
發送站內信

各位大大好 :
此問題困擾了我很久, 請大大們給我一些建議吧! 謝謝!

需求 : 我有一個每N秒自動更新的線路監控網頁, 如何在自動更新時, 網頁不會一閃一閃的
目前做法 :
使用JavaScript 每N秒自動更新,並使用AJAX呼叫API,取得JSON回傳值,並將JSON回傳值及前端的參數,傳到後端處理(.cs), 再將結果呈現在網頁Panel上,
以下做法在在chrome上, 更新時, 畫面會一閃一閃的

[前端]
<script type="text/javascript">
function setTimer(inverval)
{
clearInterval(timerId);
timerId = setInterval(getData, 5000);
}

//取得API傳來的JSON資料----------------------------------------------------------------

function getData()
{
var jsonObj;

var Url = "http://x.x.x.x/XXXX" //別人寫的API
$.ajax({
dataType: "json",
type: "GET",

url: Url,
success: function (data) {
jsonObj = data;

if (data) {
//debugger;
document.getElementById("JsonStr").value = JSON.stringify(jsonObj);
document.form2.submit();

}
},
error: function (xmlHttpRequest, error) {
debugger;
alert("Error : " + error);
}
});
}

</script>

<form id="form2" name="form2" method="post" action="Channel_Monitor.aspx">
<input type="hidden" name="hidden_autorefresh" id="hidden_autorefresh" value="false" />
<input type="hidden" name="hidden_refreshsec" id="hidden_refreshsec" value="3" />

<input type="checkbox" id="chkAutoRefresh" /> <span class="auto-style24">自動更新</span>
<select id="selInterval" disabled="disabled" name="D1">
<option value="3" selected="selected">3</option>
<option value="6">6</option>
<option value="9">9</option>
<option value="12">12</option>

</select><span class="auto-style24"> 秒</span>
</form>

<form id="form1" runat="server">
<asp:Panel ID="pnl_monitor" runat="server" BackColor="#CCCCCC"></asp:Panel>
</form>

[後端]
public partial class Monitor_Channel_Monitor : System.Web.UI.Page
{
int ChannelCountPerPage = 0;

protected void Page_Load(object sender, EventArgs e)
{

string html_table = "";
DataTable line_dt, cm_dt;


if (Request["JsonStr"] != null)
{

lbl_jsonstr.Text = Request["JsonStr"];

//handle data
~
~
this.pnl_monitor.Controls.Add(new LiteralControl(html_table));
}
}

)

搜尋相關Tags的文章: [ postback ] , [ ajax ] ,
本篇文章發表於2014-11-13 10:31
1樓
最有價值解答

風燭殘年
捐贈 VP 給 風燭殘年 檢舉此回應
你都已經透過 AJAX 來抓取資料,結果抓到的資料送回來頁面,再透過 post back 處理...
這樣當然就會一閃一閃的.

在接受到 AJAX 傳回的資料後,再接另一個 AJAX 來處理,然後傳回處理後的資料再塞回頁面上, 不要透過 document.form2.submit() 就不會一閃一閃了.
本篇文章回覆於2014-11-13 16:50
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
也許您可以了解一下Ajax真正的意義是什麼
透過Ajax從Web的服務取得資料(或傳回資料),再透過JavaScript改變化面上需要改變的內容
這些過程,不需要再額外作Submit

您會有一閃一閃,因為您做了Submit

您該做的,是想想為何需要Submit?

Submit送回後端的動作
是否可以透過Ajax去完成(彙整要送回的資料,組合成JSON,透過Ajax送回去)

^_^


本篇文章回覆於2014-11-14 08:26
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

MIS2000 Lab
檢舉此回應
HTML的 Submit按鈕 <input type=submit>
或是相關動作 document.form.submit();

如同 ASP.NET的 <asp:Button>控制項
都會觸發PostBack (回傳)

我不會寫JavaScript,好久沒用都忘光了
也不會寫JSON

您都會,顯見技術能力很強了
但是不是 ASP.NET基礎的觀念,還缺了很多(有好多漏洞呢)
本篇文章回覆於2014-11-14 09:14
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

Wendy
檢舉此回應
謝謝大大們的建議, 已經解決了
解決的方法是在接受到 AJAX 傳回的資料後,再接另一個 AJAX 來處理,然後傳回處理後的資料再塞回頁面上, 不要透過 document.form2.submit() 就不會一閃一閃了.
本篇文章回覆於2014-11-14 17:50
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.