写一个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();
}
最佳答案
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
这是接口调用的 有具体代码吗
@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>
其他回答(4)
0
右边放一个iframe。链接目标指向这个iframe
这是接口调用的 有具体代码吗
@yangzailu:
ajax 的话，就是拦截 链接点击事件 然后用ajax请求地址。结果放到目标位置。
@yangzailu: 客户端与服务器交互都通过地址来进行。你要传不同id无非就是不同的地址。
@长蘑菇星人: 我是小白 可以给源代码吗
0
https://github.com/hstarorg/HstarDemoProject/tree/master/Javascript_demo/url-router 仅供参考，把路由功能去掉就是你的需求看。
0
建议你使用 angularJs的路由
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>