作者Peruheru (還在想)
看板Ajax
標題Re: [問題] 不換頁更新圖片資訊
時間Wed Dec 30 02:18:31 2009
我沒寫過ASP，Javascript也不是很熟
所以以下有錯請不吝指正
※ 引述《chocho1981 (o(.```.)o)》之銘言：
: ※ 引述《chocho1981 (o(.```.)o)》之銘言：
: : 我想請問一下這樣的效果要怎麼做
: : 我目前有一個網頁 裡面有一張小圖片 旁邊一個按鈕
: : 目前的情況是
: : 按鈕按下==> ASP網頁 ==> 資料庫 ==> ASP網頁 ==> 圖片效果
: : (更改圖片 (存入資料庫) (讀取圖片 (顯示圖片)
: : X、Y座標) 新的座標) 新的座標)
: : 我這網頁是一個類似大富翁的遊戲
: : 但是每次按下按鈕 整個網頁就要重新讀取一次
: : 有沒有辦法使用AJAX
: : 讓按鈕按下後 只更新圖片的座標就好 (同時要修改資料庫的值)
: 不好意思 再請教一個問題
: 我目前是已經可以成功的做出我之前想要的程序了
: 只是又有個問題
: 當初我在做那個大富翁遊戲時 按下按鈕後
: 會紀錄下先前的座標 和之後的座標
: 然後用 javascript 做出一個移動的效果
: 當初是這樣弄的
: <1>
: <body onLoad="process()">
請注意這裡
推文說到，因為你是在這裡呼叫動畫的部分
所以沒有使用ajax時的時候
網頁每次更新都會呼叫process()這個函式 "一次"
但當你使用ajax來達到只更新部分頁面的功能時
process這個函式卻已經不會再發生了
為什麼呢?
因為你沒有叫他上場救援啊
打完先發後你就沒再叫過他的名字
自然他不敢擅自跑上場比賽啊
所以，你要他表現給你看，先決條件就是你得要叫他上場
你得為了ajax，另外做給ajax用的程式碼
: <2>
: <SCRIPT LANGUAGE="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可以動，使用ajax卻不能動的原因在
這段程式碼，也就是showTimer()這個函式
你是做成一次性的
也就是只適合執行一次，之後不適合再度呼叫(會產生預期效果跟實際效果的落差)
為什麼呢?
因為你的left跟top都是寫死的
你可能認為，你已經使用asp語法來動態充填數值，所以怎麼會是寫死的?
問題是，ASP或PHP等伺服器端的註解
只有在網頁被要求時會註解
假如left為100
那麼當這個網頁在完整讀取時，會寫上left=100
直接開瀏覽器看原始檔，就會看到數字在那邊
但是當你要改變left值時，比如說+10
伺服器的資料是變了，變成110
瀏覽器這邊呢?
因為你沒將這段內容更改，所以他依然寫著left=100
left跟top值會永遠保持原樣
因此，即使照著上面說的重新呼叫了process成功了
也只會重複上一次的動作，而不會顯示你所要求的動作
所以重點是什麼呢?
1.上面這四個移動相關的
其top跟left請使用一個外部可以存取修改的變數
方便你在取得Ajax的回傳時，指定給他們，讓他們不再只會原地踏步
2.要重新呼叫他們
: ==============================================================================
: 節錄程式碼如上
: 原本是可以作用的
: 但是使用ajax的方法讀取這樣的程式碼
: 卻發現一點效果也沒有
: 我自己是在猜想是不是用了ajax讀取
: 所以 <body onLoad="process()"> 這段變成無效了？
: 請教一下是因為這樣嗎？ 還是有可能是其他我沒發現的問題？
: 如果真是這樣的話 可以有什麼解決方式呢？
: → TonyQ:你怎麼讀取 , 讀取了什麼 這兩點要說啊... 12/29 23:53
: <script language=javascript>
: <!--
: function httpget(xUrl, method, sendData) {
: var xmlhttp=false;
:
: try {
: xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
: } catch (e) {
: try {
: xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
: } catch (E) {
: xmlhttp = false;
: }
: }
:
: if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
: try {
: xmlhttp = new XMLHttpRequest();
: } catch (e) {
: xmlhttp=false;
: }
: }
: if (!xmlhttp && window.createRequest) {
: try {
: xmlhttp = window.createRequest();
: } catch (e) {
: xmlhttp=false;
: }
: }
: method = method.toUpperCase();
: if(method!="POST" && method!="GET")
: return "";
: xmlhttp.open(method, xUrl, false);
: if(method=="POST")
: xmlhttp.setRequestHeader('Content-Type',
: 'application/x-www-fo\rm-urlencoded');
: xmlhttp.send(sendData);
: return xmlhttp.responseText;
: }
: function getContent(objname, cid)
: {
: var obj = document.getElementById(objname);
: if(obj)
: {
: obj.innerHTML = httpget("chk.asp", "GET", "");
: }
: }
: 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>
其實我也不知道你的ASP在收到AJAX請求後，究竟回傳了什麼
所以才會有第二大段那一長串東東
假如你回傳的是整段程式碼，充填在div1裡面
那，搞不好我說的第二大段對你毫無意義
只是我會覺得你不需要回傳這麼多東西，只要取得數字不就好了嗎？
反正呢，修改好移動的程式碼後
接著就是要回到第一段我說的
準被要呼叫他啦
因為你既然都寫了收到資料後充填在某處
何不順便，在那之後呼叫一下process()呢？
那個※注目，或許就是你可以考慮的位置喔
不過我不保證一切會正常
因為我不知道會不會在資料還沒填完時，就呼叫了動畫，導致沒程式可呼叫，沒資料可動
(程式可能只有一半)
我對javascript不太熟就在這種地方展現出來了
我只知道jQuery可以在這種環境下找到解決方法的函式
或是改用像我說的，只取回數值更改全域變數，而不使用回填的
那麼我就可以保證一切會按照順序來
就，你斟酌看看吧
: 按鈕按下後去將資料送到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
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.160.160.58
※ 編輯: Peruheru 來自: 118.160.160.58 (12/30 02:24)
1F：推 chocho1981:請教一下有沒有方法可以呼叫 process() 呢? 12/30 09:00
2F：→ chocho1981:我目前就是在這邊卡關 Q__Q 12/30 09:00
3F：推 LPH66:就寫上去就是了啊....orz 12/30 10:54
4F：→ LPH66:呼叫函式不只有在事件中可以指定.... 12/30 10:54