作者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