Ajax 板


LINE

※ 引述《sdallan ()》之铭言: : 其实我也不是很明白,在这边问是否适切XD : a.php 中一个超链结 按下後开启 plugin thickbox : 在box中把条件选一选,按下submit 後 再送值回去给a.php : 然後a.php 显示结果。 以上是理想状态 : 现在遇到的问题是, : box中按下submit 送值给 a.php 是成功了, : 不过,a.php的结果画面出现在 thickbox 中。 这个问题其实不只有一种解 , 应该说每种解都可以 , 端看流程设计而已. 要先了解的是 thickbox 有两种主要模式 , 在显示上没有很明显的不同 , 但是运作流程却有些微不同 .也因此适用环境、能选用的取舍条件也不同. a.ajax mode . 在使用者要求开启子页面时 , 对子页面url 发 ajax request 取得子页面 body, 并在主页面上建立能容纳并显示子页面内容的 dom 物件 , 关闭时是采用隐藏(或删除)刚建立的 dom物件的方式进行 基本上采用这项设定 , 最大的差异在子页面载入後是主页的一部分 子页是视为主页的一个附属元件. 你不太容易只改变子页的内容 , 或者只将子页区域做刷新(refresh)/送出(submit)动作. (通常就是要手工撰写重作一次ajax的流程 ) 但是也因为同一页面的关系 , 如果有需要透过子页面的动作, 来改变、影响父页面的页面元素 , 用ajax mode是比较理想的. 可以在同一个dom tree , 不需要透过 parent 来作多层调用. 还有一个不常出现的缺点 , 因为是同一个页面 , 所以主页面跟子页面有时候会有 css冲突、重复载入script的状况. 这些是你要依据你选择的模式不同去进行的微调 , 当然大部分状况下是不见得会碰到这些状况 , 端看你的设计方法. b.iframe mode 在使用者要求开启子页面时 , 建立一 iframe 并设定其 url 为欲显示的子页面 . 刚刚描述 ajax 模式的反过来说就是 iframe 的 , 基本上相对於 ajax mode , 他就是有主页面跟子页面两个区块 , 你可以只针对子页面来进行submit 或 refresh 而不影响主页面 , 对於子页面区块是功能独立或者需要特别具有时效性的页面 , 是很适合用 iframe mode 的. 缺点就是当你想要比方说送出後让主页转向或修改主页的内容 , 需要透过 parent 来取得主页来作处理, 流程上会稍微繁复一点. (但对dom 操作得熟一点这就不是问题.) ──────────────────────────────── 两种模式选择的不同 , 通常会影响你在设计接受 ajax 调用的 html 内容. 就我过去经验 , 会使用到 thickbox 的状况大概可以分成以下几种, 我也分别会建议采用一些不同的对策: 1.在子页面操作後主页切换 以登入( Login ) 为例 , 按下去之後跳出登入子页面 , 如果登入失败或者取消登入 , 就取消 thickbox效果回到原页面 , 如果登入成功就将原本主页面跳往登入後的页面. 以这种情形而言 , 我个人是认为 ajax mode 比较适合使用 , 因为这种情形的操作流程主要还是在於主页 , 子页只是附属. 2.子页面的行为是独立区块 以"要删除一项资讯"为例 , 我可能会需要列出可能影响到的范围 , 请使用者确认 , 在使用者进行确认送出後 , 在子页面单独显示删除完成的讯息 . 在这种状况下就适合采用 iframe mode , 因为流程的进行主要在子页面. 3.子页面的行为具有时效性 以"浏览即时统计资料" 为例 , 因为该资讯可能会需要一直刷新 , 我们又不希望更新时更新整个主页 , 只想针对子页来进行更新 , 这时我们会采用 iframe mode. 当然采用ajax mode , 并在其中撰写定期 ajax 的code也是可行的 , 只是相较之下 iframe mode 撰写定期 refresh 相对容易. 当然也还有一些其他的状况 , 要怎麽设计 , 其实是 case by case 的 . 就算因为某些其他的理由必须选择其中一种 mode , 但要达成那个mode 所有的缺陷 , 除了部份 iframe 本身所无法改变的问题外 , 几乎都可以透过撰写额外的script 来达成目标 . 单看原问题所给的资讯 , 显然是透过 iframe mode 来进行设计 , 这时候可选择改成 ajax mode (也有可能需要跟着修改对应response page) , 也可以继续沿用 iframe mode , 但是在送出完成後的页面的 onload 中 , 下 parent.window.location ='某特定网址'. 来改变主页的连结 . 这个中巧妙 , 可以按照自己需要来进行撰写 , 我个人是认为先以能达成最低要求为主 , 再了解相关资讯来了解其他处理问题的方法罗. -- What do you want to have ? / What do you have? 从书本中,你可以发现我的各种兴趣。 从CD中,你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人,但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --



※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 59.105.101.26
1F:推 kewang:大推这篇!!! 07/04 13:17
2F:→ TonyQ:补充一下 , 所谓ajax mode跟iframe mode 指的是 07/04 13:58
3F:→ TonyQ:http://jquery.com/demo/thickbox/ 中提到的ajax/iframed 07/04 13:58
4F:→ TonyQ:content , 至於inline content算是偏ajax content. 07/04 14:01
5F:→ TonyQ:剩下的single image/gallery 适用范围小,不另讨论. 07/04 14:01
6F:推 chrisQQ:这人放假很闲~~ 07/04 17:03
7F:推 kewang:XDDDDD 07/04 20:12







like.gif 您可能会有兴趣的文章
icon.png[问题/行为] 猫晚上进房间会不会有憋尿问题
icon.pngRe: [闲聊] 选了错误的女孩成为魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一张
icon.png[心得] EMS高领长版毛衣.墨小楼MC1002
icon.png[分享] 丹龙隔热纸GE55+33+22
icon.png[问题] 清洗洗衣机
icon.png[寻物] 窗台下的空间
icon.png[闲聊] 双极の女神1 木魔爵
icon.png[售车] 新竹 1997 march 1297cc 白色 四门
icon.png[讨论] 能从照片感受到摄影者心情吗
icon.png[狂贺] 贺贺贺贺 贺!岛村卯月!总选举NO.1
icon.png[难过] 羡慕白皮肤的女生
icon.png阅读文章
icon.png[黑特]
icon.png[问题] SBK S1安装於安全帽位置
icon.png[分享] 旧woo100绝版开箱!!
icon.pngRe: [无言] 关於小包卫生纸
icon.png[开箱] E5-2683V3 RX480Strix 快睿C1 简单测试
icon.png[心得] 苍の海贼龙 地狱 执行者16PT
icon.png[售车] 1999年Virage iO 1.8EXi
icon.png[心得] 挑战33 LV10 狮子座pt solo
icon.png[闲聊] 手把手教你不被桶之新手主购教学
icon.png[分享] Civic Type R 量产版官方照无预警流出
icon.png[售车] Golf 4 2.0 银色 自排
icon.png[出售] Graco提篮汽座(有底座)2000元诚可议
icon.png[问题] 请问补牙材质掉了还能再补吗?(台中半年内
icon.png[问题] 44th 单曲 生写竟然都给重复的啊啊!
icon.png[心得] 华南红卡/icash 核卡
icon.png[问题] 拔牙矫正这样正常吗
icon.png[赠送] 老莫高业 初业 102年版
icon.png[情报] 三大行动支付 本季掀战火
icon.png[宝宝] 博客来Amos水蜡笔5/1特价五折
icon.pngRe: [心得] 新鲜人一些面试分享
icon.png[心得] 苍の海贼龙 地狱 麒麟25PT
icon.pngRe: [闲聊] (君の名は。雷慎入) 君名二创漫画翻译
icon.pngRe: [闲聊] OGN中场影片:失踪人口局 (英文字幕)
icon.png[问题] 台湾大哥大4G讯号差
icon.png[出售] [全国]全新千寻侘草LED灯, 水草

请输入看板名称,例如:WOW站内搜寻

TOP