大家好,最近遇见一个麻烦的问题。
我正在建设一个产品展示的网站。需要一个这样的效果。
主页面有许多产品的目录表,点击每一个目录条后,提交该目录条的名字,到一个JQUERY弹出页面里,进行数据库查询,竖列出该目录的所有产品。
该JQUERY弹出页面的结构如图所示。下面是一个搜索分页。十条一显示,只显示每个产品的名字。上面是一个单产品的详细内容展示,有点像JQUERY画廊。JQUERY弹出页面另有一个搜索框。可以方便游客查询其他产品,查询结果的显示结构如上。
现在我需要的是,在JQUERY弹出页面里做任何的搜索和翻页动作,主页面不刷新。找了许久,终于找到了一个类似效果的网站。MSN的,可供大家参考。http://powerwall.msnbc.msn.com大家可以打开尝试一下。它的主页面是照片(而我的是文字,应该差不多),点击任意一张照片,打开一个弹出页面,在弹出页面里进行翻页,主页面不刷新。(它可能是静态页面。而我提交给了数据库)它上面还有一个BING的搜索框,任意搜索后,显示的结果排列在弹出页面上,主页面始终不刷新(这一步大家都调用了数据库)。效果就是这样,本人学识浅陋,参不透它那种#后面还可以传递变量值的方法。期待哪位高手,能给些简单的代码,可以实现我的需求,谢谢。

解决方案 »

  1.   

    典型的ajax,这个相对于ajax来说很简单,我简单说一下思路
    首先你在弹出层里边建立一个div代码如下
    <div id='box'></div>
    这个div的目的是用来放置详细信息的
    弹出层下侧的分页代码这需要你第一次打开弹出层的时候使用ajax计算出来,共有多少页,然后把翻页编号放上就好了
    当你点击第二页的时候首先要把div内的内容清理掉,同时显示一个loading图片
    此时ajax读取服务器第二页应该现实的资料,读取完成之后返回客户端,使用innerHTML或jquery的append等把新读取来的内容放入div内就好了//js代码
    document.getElementById('box').innerHTML='';
    document.getElementById('box').innerHTML='新读取来的内容';//jquery代码
    $('#box').empty().append('新读取来的内容');
      

  2.   

    推荐你用jquery的colorbox,可以弹出一个带有iframe的弹框,直接用iframe访问就好,还不用ajax!例子Outside Webpage (Iframe) 这个例子
      

  3.   

    sibang, 从主页提交到弹出页面,再返回数据,这个方法我也知道。
    那如果在弹出的页面上,再进行搜索,分页呢?hnxxwyq,colorbox有类似的效果,不过它那个IFRAME的大小是固定死的,我不在搜索结果后,右侧有一根丑陋的拖动条。谢谢你们。 
      

  4.   

    服务器返回json格式的数据(encode_josn函数),用ajax读取服务器返回的数据,用JS DOM创建返回的数据HTML。至于翻页 也是服务器返回 总页数,用js去计算,搜索也是 用ajax提交给服务器,返回的也是json数据 用js处理显示返回的结果就行了,无刷新
      

  5.   

    用个jquery的弹出框插件就可以了,里面内容用ajax来获取下一条就好了
      

  6.   

    说起来容易,做起来难,我试过jquery load, jquery post, jquery json。 但都做不成像MSNBC那种,底页不刷新,上面的弹出页可以翻页,再搜索的。再给大家看2个比较:
    第一个链接,是它原始的搜索页面,搜索如何关键字,都会重新刷新载入页面,典型的URL传输数据。
    http://powerwall.msnbc.msn.com/politics/search?searchTerm=usa第二个链接,弹出页面嵌入在DIV层里面(绝对不是IFRAME,大家可以看源码),该弹出页就是第一个页面。两个URL用一个#(锚点)链接,后半部搜索依旧靠URL传输数据,但是锚点是永远不需要刷新页面的。
    http://powerwall.msnbc.msn.com/#!wallState=0__/politics/search?searchTerm=usa这个技术我还是第一次看到(我设计我的网站时,还没想那么多,只是想结合JQUERY弹出页,JQUERY画廊什么的),即使怀疑URL只是通过JS或其他规则重写的……CSDN已经算国内最顶级的技术论坛了,可是大家和我一样也只能看到,想到些常规的技术(虽然我学的晚,技术还不如大家)看样子我们中国人是做不出它那种效果了。全世界互联网最顶级的技术,还是要推崇米国……失落……我的设想太超前了,我要的效果,问不到可以实际解决的答案。全世界现今只有一家类似,只有技术先祖微软做到了。看样子要改版了。这个问题,留着大家继续讨论吧。讨论微软的技术,讨论国人技术和世界技术的差距。
    过几天散分。
      

  7.   

    个人觉得,不必纠缠于ajax。条条大路通罗马嘛。。
    你可以考虑对那个弹出窗口(应该是用div做的吧),在这个div中,你可以用iframe来实现,当然这里面可以嵌入页面。如果是一个页面的话,你就可以在这个页面里面做任何动作了
    如果要靠ajax实现,那你就要js来做很多工作,用页面的话,相信你已经有相关的分页组件了
    给你个思路不知道能不能解决问题