作者TonyQ (^^)
看板Ajax
標題Re: [問題] 不換頁更新圖片資訊
時間Wed Dec 30 11:04:36 2009
※ 引述《chocho1981 (o(.```.)o)》之銘言：
: 標題: Re: [問題] 不換頁更新圖片資訊
: 時間: Tue Dec 29 23:46:32 2009
:
: ※ 引述《chocho1981 (o(.```.)o)》之銘言：
: : 我想請問一下這樣的效果要怎麼做
: : 我目前有一個網頁 裡面有一張小圖片 旁邊一個按鈕
: : 目前的情況是
: : 按鈕按下==> ASP網頁 ==> 資料庫 ==> ASP網頁 ==> 圖片效果
: : (更改圖片 (存入資料庫) (讀取圖片 (顯示圖片)
: : X、Y座標) 新的座標) 新的座標)
: :
: : 我這網頁是一個類似大富翁的遊戲
: : 但是每次按下按鈕 整個網頁就要重新讀取一次
: : 有沒有辦法使用AJAX
: : 讓按鈕按下後 只更新圖片的座標就好 (同時要修改資料庫的值)
1F：→ TonyQ:其實我更不解的是為什麼一個 request 每次都要扯ajax XD12/29 23:51
2F：→ chocho1981:因為不想要玩大富翁的時候整張地圖在那邊reload12/30 00:26
AJAX不是用來「使用」的，他是一種「設計模式」，
也就是符合某一種特定的流程就稱之為ajax ，被用來「使用」的是 request 。
(請注意一下ajax用的iframe或 XMLHttp
Request )
我說的是既然你都描述流程的狀況下，描述需求比講一句ajax來得重要很多。
你這篇文章的原始問題看起來是七零八落的，
你要更新圖片的座標，那你的資料來源是怎麼要來，
原本頁面要更新的是哪些項目，這些資料沒有你是要別人怎麼回。 XD
都沒有也沒關係，來個現在運行的頁面也會知道，什麼都沒有當然就無從幫起。
:
: 不好意思 再請教一個問題
:
: 我目前是已經可以成功的做出我之前想要的程序了
:
: 只是又有個問題
:
: 當初我在做那個大富翁遊戲時 按下按鈕後
:
: 會紀錄下先前的座標 和之後的座標
:
: 然後用 javascript 做出一個移動的效果
:
: 當初是這樣弄的
:
: <1>
: <body onLoad="process()">
:
: <2>
:
: <SCRIPT LANGUAGE="JavaScript">
type="text/javascript" //這不會有影響
:
: function process() {
: setInterval("showTimer();",10);
: }
:
: var i=0;
:
: function showTimer() {
:
: if (<%=rs5("locX")-session("locX")%>>=i){
: document.getElementById('move_pic').style.left=<%=session("locX")%>+i
: i+=2;
: }
: if (<%=rs5("locY")-session("locY")%>>=i){
: document.getElementById('move_pic').style.top=<%=session("locY")%>+i;
: i+=2;
: }
: if (<%=rs5("locX")-session("locX")%><=i*-1){
: document.getElementById('move_pic').style.left=<%=session("locX")%>-i;
: i+=2;
: }
: if (<%=rs5("locY")-session("locY")%><=i*-1){
: document.getElementById('move_pic').style.top=<%=session("locY")%>-i;
: i+=2;
: }
: ==============================================================================
:
: 節錄程式碼如上
:
: 原本是可以作用的
:
: 但是使用ajax的方法讀取這樣的程式碼
:
: 卻發現一點效果也沒有
:
: 我自己是在猜想是不是用了ajax讀取
:
: 所以 <body onLoad="process()"> 這段變成無效了？
:
: 請教一下是因為這樣嗎？ 還是有可能是其他我沒發現的問題？
:
: 如果真是這樣的話 可以有什麼解決方式呢？
:
: --
:
※ 發信站: 批踢踢實業坊(ptt.cc)
: ◆ From: 210.240.131.71
: → TonyQ:你怎麼讀取 , 讀取了什麼 這兩點要說啊... 12/29 23:53
:
: <script language=javascript>
: <!--
: function httpget(xUrl, method, sendData) {
:
/* 前略... /*
: xmlhttp.open(method, xUrl, false);
^^^^^^
(這樣的作法嚴謹來說不算ajax , 因為 AJAX 是指非同步的傳輸. )
/* 後略 */
:
: }
:
: function getContent(objname, cid)
: {
: var obj = document.getElementById(objname);
: if(obj)
: {
: obj.innerHTML = httpget("chk.asp", "GET", "");
你這裡的 response 不給 ,
誰曉得你傳回什麼跟要怎麼處理...
: }
:
: }
:
: function postContent(objname, postdata)
: {
: var obj = document.getElementById(objname);
: if(obj)
: {
: obj.innerHTML = httpget("chk.asp", "POST", postdata);
: }
:
: }
:
:
: -->
: </script>
:
: 程式碼主要如上列所示
:
: 再配上一個按鈕 和一個DIV標籤
:
: <input type="button" value"GO" name="B3" onclick="postContent('div1','B3=1');">
:
: <div id=div1> </div>
:
: 按鈕按下後去將資料送到chk.asp去作處理
:
: 更新資料庫後 一樣由chk.asp這個網頁秀出資料庫中更新過後的數據
:
: 大致上是這樣~"~
:
: ※ 編輯: chocho1981 來自: 210.240.131.69 (12/30 00:08)
: → emn178:用ajax沒有reload的話 body onload就只會執行一次 12/30 00:04
: → chocho1981:所以使用ajax就沒辦法用JS做動畫效果了嗎 QQ? 12/30 00:27
: 推 buganini:當然不是啊 你要找其他觸發點 或用setTimeout之類的 12/30 02:39
: → emn178:showTimer中的變數應該由JavaScript去給定,才能配合AJAX使 12/30 09:25
: → emn178:用,然後在AJAX request結束後去呼叫process就行了 12/30 09:26
上面的推文跟三樓其實都已經講到關鍵點 .
如果我是你 , 我會改寫函式
var rsX="<%=rs5("locX")%>";
var rsY="<%=rs5("locY")%>";
var sessionX="<%=session("locX")%>";
var sessionY="<%=session("locY")%>";
function showTimer(){
if (rsX-sessionX>=i){
document.getElementById('move_pic').style.left=sessionX+i;
i+=2;
}
if (rsY-sessionY>=i){
document.getElementById('move_pic').style.top=sessionY+i;
i+=2;
}
if (rsX-sessionX<=i*-1){
document.getElementById('move_pic').style.left=sessionX-i;
i+=2;
}
if (rsY-sessionY<=i*-1){
document.getElementById('move_pic').style.top=sessionY-i;
i+=2;
}
}
到時候你 requrest 回來的東西 , 中間插個
<input type="hidden" id="rsX" value="xx" />
<input type="hidden" id="rsY" value="xx" />
<input type="hidden" id="sessionX" value="xx" />
<input type="hidden" id="sessionY" value="xx" />
function getContent(objname, cid)
{
var obj = document.getElementById(objname);
if(obj)
{
obj.innerHTML = httpget("chk.asp", "GET", "");
rsX=document.getElementById("rsX").value;
rsY=document.getElementById("rsY").value;
sessionX=document.getElementById("sessionX").value;
sessionY=document.getElementById("sessionY").value;
}
}
//類似這樣的處理流程 , 至於 rsX跟rsY sessionX sessionY ,
//這些value要怎麼填, 自己再想想看. XD
//其實異動不大的狀況下用json做回傳 , 應該是蠻理想的 ,
//有興趣再自己去看看相關的文吧...
坦白講 , 我覺得要寫到這樣 , 那都不如我來幫你寫程式了,
我自己來寫code幾分鐘內就寫得完了...打這篇文章要花我幾十分鐘 ,
所以這類型的文章才會說很難解釋 , 浪費時間嘛...
如果沒辦法知道自己 request送了什麼、弄不清楚ajax流程中時間軸 ,
不能掌握自己回傳的response , 不能隨時掌握頁面dom中元素的狀況 ,
特別是沒辦法瞭解資料來源跟如何取得資料 ,
這樣就算要教 , 也無從教起啊 ,就好像要教不會乘法的人算面積一樣 .
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 74.207.224.18
※ 編輯: TonyQ 來自: 74.207.224.18 (12/30 11:07)
3F：推 sjrom:呵，教得懂的話就可以讓別人省N個鐘頭了..推佛心教學. 12/30 13:36
4F：推 cassatte:我猜原PO看不懂 12/30 22:09
5F：→ TonyQ:不至於吧 , 都說覺得不難了... 12/30 22:55