作者chocho1981 (o(.```.)o)
看板Ajax
標題Re: [問題] 不換頁更新圖片資訊
時間Tue Dec 29 23:46:32 2009
※ 引述《chocho1981 (o(.```.)o)》之銘言：
: 我想請問一下這樣的效果要怎麼做
: 我目前有一個網頁 裡面有一張小圖片 旁邊一個按鈕
: 目前的情況是
: 按鈕按下==> ASP網頁 ==> 資料庫 ==> ASP網頁 ==> 圖片效果
: (更改圖片 (存入資料庫) (讀取圖片 (顯示圖片)
: X、Y座標) 新的座標) 新的座標)
:
: 我這網頁是一個類似大富翁的遊戲
: 但是每次按下按鈕 整個網頁就要重新讀取一次
: 有沒有辦法使用AJAX
: 讓按鈕按下後 只更新圖片的座標就好 (同時要修改資料庫的值)
不好意思 再請教一個問題
我目前是已經可以成功的做出我之前想要的程序了
只是又有個問題
當初我在做那個大富翁遊戲時 按下按鈕後
會紀錄下先前的座標 和之後的座標
然後用 javascript 做出一個移動的效果
當初是這樣弄的
<1>
<body onLoad="process()">
<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讀取
所以
<body onLoad="process()"> 這段變成無效了？
請教一下是因為這樣嗎？ 還是有可能是其他我沒發現的問題？
如果真是這樣的話 可以有什麼解決方式呢？
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.240.131.71
1F：→ 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-form-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>
按鈕按下後去將資料送到chk.asp去作處理
更新資料庫後 一樣由chk.asp這個網頁秀出資料庫中更新過後的數據
大致上是這樣~"~
※ 編輯: chocho1981 來自: 210.240.131.69 (12/30 00:08)
2F：→ emn178:用ajax沒有reload的話 body onload就只會執行一次 12/30 00:04
3F：→ chocho1981:所以使用ajax就沒辦法用JS做動畫效果了嗎 QQ? 12/30 00:27
4F：推 buganini:當然不是啊 你要找其他觸發點 或用setTimeout之類的 12/30 02:39
5F：→ emn178:showTimer中的變數應該由JavaScript去給定,才能配合AJAX使 12/30 09:25
6F：→ emn178:用,然後在AJAX request結束後去呼叫process就行了 12/30 09:26