如何使用 ajax 无刷新既改变网页地址(url)又能实现前进后退改变内容?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何使用 ajax 无刷新既改变网页地址(url)又能实现前进后退改变内容?

2016-07-29 10:53:37 1818 2

假设现在有一个网页如下:

<div class="nav">
    <ul>
        <li data-page-name="a-page" data-page-href="a-page.html">
         //当点击这个 li 标签时,div#a-page 显示,并在他的子 div.ajax-load-             a-page当中载入 a-page.html。同时 url 改变为 example.com/a-page.html,并且前进后退可用。下同。
        <li data-page-name="b-page" data-page-href="b-page.html">
        //....
    </ul>
</div>

<div id="a-page">
    <div class="ajax-load-a-page">
        //....
    </div>
</div>
<div id="b-page">
    <div class="ajax-load-b-page">
        //....
    </div>
</div>

现在我试用了 pushstate,但是只能改变地址的 url,前进后退也只改变 url 地址,内容没有改变。可能是没有绑定 popstate 的缘故,但不知道这部分的绑定代码应该怎么写?
补充一下,不必考虑IE

取消 提交回答
全部回答(2)
  • 涛声依旧2
    2019-07-17 20:01:40

    我知道怎么实现的,请加我qq:501244162

    0 0
  • a123456678
    2019-07-17 20:01:40

    使用的 jquery.ba-hashchange 插件,
    还有html5的history.pushState事件,
    IE下监听 $(window).on('hashchange', function(){});事件。

    0 0
添加回答
相关问答

1

回答

AJAX请求总共有多少种CALLBACK啊?

2022-08-16 18:11:16 29浏览量 回答数 1

1

回答

原生js ajax请求有几个步骤?分别是什么呢?

2022-08-16 20:10:48 73浏览量 回答数 1

1

回答

ajax有几种请求方式啊?

2022-08-16 20:40:34 71浏览量 回答数 1

1

回答

Ajax中http请求是什么呀?

2022-08-17 09:11:07 133浏览量 回答数 1

1

回答

Ajax请求Json数据后如何解析?

2021-12-08 23:42:50 139浏览量 回答数 1

1

回答

基于django使用ajax发送post请求时,都可以使用哪种方法携带csrf token?

2021-12-07 15:52:33 193浏览量 回答数 1

0

回答

AJAX请求核心对象XMLHttpRequest正常返回状态码是什么呢?

2021-11-01 23:46:28 172浏览量 回答数 0

1

回答

XMLHttpRequest修改默认的Ajax是否请求同步为异步呢?

2021-11-02 12:35:01 214浏览量 回答数 1

2

回答

Ajax请求调用后端接口报错返回:500异常,请问是什么原因?

2021-10-25 23:26:15 785浏览量 回答数 2

1

回答

springmvc tomcat中的ajax请求? 400 报错

2020-06-22 23:13:02 196浏览量 回答数 1
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载