首页新闻找找看学习计划

写一个ajax点击左边标题栏右边div显示不同的内容。

0
悬赏园豆:30 [已解决问题] 解决于 2016-09-05 08:57

怎么写ajax获取不同的内容,把不同的id值传给后台。

<include File="Public:header" />
<div class="about_box">
    <div class="dq_pos">
        当前位置:首页>关于我们>
    </div>
    <div class="about_con">
        <div style="padding-top: 40px;" class="about_left">
              <div style="margin-top: 7px;" class="about_title">  
                  <img style="width: 178px;" src="/{:APP_PATH}/Public/img/help/about.png">
              </div>
              <div style="padding-top: 5px;" class="about_list">
                <ul>
                    <li><a href="#" id="qywh">企业简介</a></li>
                    <li><a href="#" id="yuanli">公司资质</a></li>
                    <li><a href="#" id="ptgg">平台公告</a></li>
                    <li><a href="#" id="hyxw">行业新闻</a></li>
                    <li><a href="#" id="gywm">招贤纳士</a></li>
                    <li><a href="#" id="partner">合作伙伴</a></li>
                    <li><a href="#" id="lianxi">联系我们</a></li>
                </ul>
              </div>
        </div>
        <if>
        <div style="width:820px;border:1px solid red;margin-left:178px;">
             {$re.content}
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
<include file="Public:footer" />

后台:

 public function AboutUs(){
        $data=array(
            'CmdId'=>'HelpInfo',
             'Token'=>'',     
              'PostDetails'=>json_encode(array(
                   'nid'=>'qywh',
                   'nid'=>'yuanli',
                   'nid'=>'gywm',
                   'nid'=>'gywm',
                   'nid'=>'lianxi',
               )));
        $curl=new CurlController();
        $re=$curl->SendCurl($data);
         if ($re['RespCode'] === '000'){
            $re = $re['AcctDetails'];
            //print_r($re['content']);
            $this->assign('re',$re); 
        }
    $this->display();
   }

问题补充:

求大神帮忙写出来

yangzailu的主页 yangzailu | 初学一级 | 园豆:9
提问于:2016-09-02 10:46
< >
分享
最佳答案
0

我不是大神,不过有点思路

1. 写一个函数实现在右边DIV显示某页面-假设给右边的那个DIV设一个id="ajaxLoad",这个load函数是jQuery封装的函数,所以需要引入jquery才行。

function loadPage(page){
    $("#ajaxLoad").load(page);
}

2. 在左边DIV<a >标签中调用此函数:<a href="javascript:loadPage('xxxx.html')"></a>,在参数中加上想要加载的页就可以了!

3. 这样写AJAX不能在浏览器中保存历史记录,如果需要实现此功能则需要用到浏览器的hash,要的话我再写。

 

收获园豆:30
藏锋入鞘 | 菜鸟二级 |园豆:232 | 2016-09-02 11:27

这是接口调用的 有具体代码吗

yangzailu | 园豆:9 (初学一级) | 2016-09-02 11:32

@yangzailu: 你说的接口调用意思是指右边的DIV中的内容是接口调用吧!这个页面前端的东西就这么多,右边DIV中的内容需要你在loadPage()函数中传入的页面中写出来。

至于源码(jianjie.html,zizhi.html中调用接口之类的东东):

<ul>
     <li><a href="javascript:loadPage('jianjie.html')" id="qywh">企业简介</a></li>
     <li><a href="javascript:loadPage('zizhi.html')" id="yuanli">公司资质</a></li>
     <li><a href="javascript:loadPage('guanggao.html')" id="ptgg">平台公告</a></li>
     <li><a href="javascript:loadPage('jianjie.html')" id="hyxw">行业新闻</a></li>
     <li><a href="javascript:loadPage('jianjie.html')" id="gywm">招贤纳士</a></li>
     <li><a href="javascript:loadPage('jianjie.html')" id="partner">合作伙伴</a></li>
     <li><a href="javascript:loadPage('jianjie.html')" id="lianxi">联系我们</a></li>
</ul>
藏锋入鞘 | 园豆:232 (菜鸟二级) | 2016-09-02 11:44
其他回答(4)
0

右边放一个iframe。链接目标指向这个iframe

长蘑菇星人 | 园豆:1820 (小虾三级) | 2016-09-02 11:31

这是接口调用的 有具体代码吗

支持(0) 反对(0) yangzailu | 园豆:9 (初学一级) | 2016-09-02 11:32

@yangzailu: 
ajax 的话,就是拦截 链接点击事件 然后用ajax请求地址。结果放到目标位置。

支持(0) 反对(0) 长蘑菇星人 | 园豆:1820 (小虾三级) | 2016-09-02 11:34

@yangzailu: 客户端与服务器交互都通过地址来进行。你要传不同id无非就是不同的地址。

支持(0) 反对(0) 长蘑菇星人 | 园豆:1820 (小虾三级) | 2016-09-02 11:37

@长蘑菇星人: 我是小白 可以给源代码吗

支持(0) 反对(0) yangzailu | 园豆:9 (初学一级) | 2016-09-02 11:47
0

https://github.com/hstarorg/HstarDemoProject/tree/master/Javascript_demo/url-router  仅供参考,把路由功能去掉就是你的需求看。

幻天芒 | 园豆:36522 (高人七级) | 2016-09-02 11:56
0

建议你使用 angularJs的路由

小精灵儿Pawn | 园豆:470 (菜鸟二级) | 2016-09-02 17:46
0

前段时间刚写过一个,可以用内联样式,也就是iframe解决

下面是主页中给右边的框架

<div id="main">
<iframe src="right.html" width=100% height=100% name="in" frameborder="0" scrolling="no">
</iframe>
</div>

下面是链接到其他页面的链接,target属性值对应上面框架name,所以只会上面框架中打开新窗口

li> <a href="sales/saletask.html" target="in">销售任务</a></li>
<li> <a href="sales/contract.html" target="in">合同管理</a></li>
<li> <a href="sales/buymanage.html" target="in">认购管理</a></li>

 

 

奋斗の蜗牛 | 园豆:202 (菜鸟二级) | 2016-09-06 10:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册