发送带有新URL的AJAX请求和响应

托比亚斯S.

首先,我想说的是,我是Web开发的新手,并且缺少一些特定的科学术语。

我在后端使用金字塔,在前端使用Chameleon。现在我有一个主页,在其中发送一些ajax请求。收到响应后,我将获得一个用于DOM操作的回调。AFAIK dom操作不会被浏览器保存,因此用户无法单击“后退”按钮。但是如何调用该机制-或如何获得Ajax响应和唯一的URL?网址可以是当前参数+参数之外的内容,也可以是参数的sha1。

我需要在服务器端实现特定的处理程序,还是可以由客户端来实现?

在google的帮助下,我只能发现自己无法在浏览器中保留dom操纵状态。因此,每个请求都需要一个唯一的url->因此,我认为这必须在服务器端完成,但是正如我所说,我是新手。

谢谢 :)

编辑:该网站-我正在编程-可以想象成“谁想成为百万富翁”。我们有多个回合,用户可以在每个回合中选择多个答案,其中每个回合都取决于最后一个回合。很难为此添加代码,因为它是我博士学位的一部分,而且非常庞大:\

谢尔盖

(首先,Chameleon不会在“前端”运行-它是一个Python模板库,它将一个字符串(您的模板)和一个python dict(模板参数)作为输入,并返回另一个字符串作为其输出。当发送给客户端时,该输出将被浏览器解释为HTML页面,并可能带有嵌入式<script>标签。然后,这些标签中的JavaScript由浏览器执行-这就是在客户端上运行的代码。)

现在,您的问题:)您可以从JavaScript更改浏览器的地址字符串中显示的URL,这将在浏览器的历史记录中插入一个新条目。您还需要以某种方式确保您的应用程序可以基于该新URL中的信息来还原其状态,否则,如果有人为该URL添加书签,在新选项卡中将其打开或只是重新加载该应用程序,事情将会中断。

操纵浏览器历史的一种较旧的方法是通过window.location.hash修改URL的哈希部分这是一个最小的示例:

<html>

<body>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <input id="name-input" type="text" />

    <script>
        // restore the "application state" on page load -
        // if there's a hash in the url we set the text in the input
        if (window.location.hash) {
            $('#name-input').val(window.location.hash.substring(1));
        }

        // whenever the hash changes (user clicked the Back button)
        // we also need to modify the application state
        $(window).on('hashchange', function () {
            $('#name-input').val(window.location.hash.substring(1));
        });             

        // type some text in the input and press Enter. 
        // Observe the URL changing. Try using the Back button.
        $('#name-input').on('change', function () {
            window.location.hash = $(this).val();
        });
    </script>
</body>

</html>

修改历史记录的另一种更现代的方法是通过history.pushState(),它功能更强大,但可能需要服务器端的支持(您的服务器将需要能够从应用程序转换后的新URL中提供正确的页面到-如果您的URL看起来像mysite.com/page1,,mysite.com/page2并且您使用pushState从过渡/page1/page2-,则服务器需要能够同时处理这两个URL)。

您还需要注意,存在专门用于处理此类情况(检索JSON数据,呈现页面,修改URL)的客户端框架的整个世界,因此也许您会发现使用客户端-侧框架而不是手动做事,从而简化了事情。我将首先查看Backbone.js,因为它非常小巧,不需要您像其他框架那样以“唯一且真实的方式”进行操作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

HTTP 服务器发送带有响应的新请求

来自分类Dev

Ajax json 请求和响应

来自分类Dev

发送带有套接字的url请求?

来自分类Dev

Ajax提交带有漂亮URL的请求

来自分类Dev

如何发送带有clientID的请求和带有Flutter的秘密

来自分类Dev

使用require时,没有从ajax请求发送响应

来自分类Dev

发送带有javascript响应格式的ajax GET

来自分类Dev

jQuery和Rails Ajax请求和响应

来自分类Dev

jQuery和Rails Ajax请求和响应

来自分类Dev

状态更改时发送带有状态数据的ajax请求

来自分类Dev

如何使用Rails发送带有ajax发布请求的表单

来自分类Dev

如何从jQuery发送带有AJAX请求的令牌

来自分类Dev

如何使用Rails发送带有Ajax发布请求的表单

来自分类Dev

发送带有凭据的飞行前(OPTIONS)AJAX请求

来自分类Dev

通过 fetch api 发送带有 ajax 请求的 cookie

来自分类Dev

带有其他对象列表的Spring Web服务请求和响应映射

来自分类Dev

此URL请求的http请求和响应正文是什么?

来自分类Dev

带有richfaces 4.3的JSF 2-AJAX请求和呈现时重复ID

来自分类Dev

URL中带有GET参数的AJAX POST请求

来自分类Dev

发送带有“正文请求”的NSMutableURLRequest请求

来自分类Dev

发送列表中每个URL的WS请求并将响应映射到新列表

来自分类Dev

热销发送带有cljs-ajax且其主体键不带冒号的ajax请求

来自分类Dev

热销发送带有cljs-ajax且其主体键不带冒号的ajax请求

来自分类Dev

带有自定义HTTP POST请求和响应的jQuery Datatables服务器端分页

来自分类Dev

Symfony2中的简单AJAX请求和响应

来自分类Dev

带有ajax请求的Hightchart

来自分类Dev

带有Bootstrap的AJAX请求

来自分类Dev

通过nodejs下载响应POST请求而发送的文件?(没有AJAX)

来自分类Dev

向php发送ajax请求时没有数据响应

Related 相关文章

  1. 1

    HTTP 服务器发送带有响应的新请求

  2. 2

    Ajax json 请求和响应

  3. 3

    发送带有套接字的url请求?

  4. 4

    Ajax提交带有漂亮URL的请求

  5. 5

    如何发送带有clientID的请求和带有Flutter的秘密

  6. 6

    使用require时,没有从ajax请求发送响应

  7. 7

    发送带有javascript响应格式的ajax GET

  8. 8

    jQuery和Rails Ajax请求和响应

  9. 9

    jQuery和Rails Ajax请求和响应

  10. 10

    状态更改时发送带有状态数据的ajax请求

  11. 11

    如何使用Rails发送带有ajax发布请求的表单

  12. 12

    如何从jQuery发送带有AJAX请求的令牌

  13. 13

    如何使用Rails发送带有Ajax发布请求的表单

  14. 14

    发送带有凭据的飞行前(OPTIONS)AJAX请求

  15. 15

    通过 fetch api 发送带有 ajax 请求的 cookie

  16. 16

    带有其他对象列表的Spring Web服务请求和响应映射

  17. 17

    此URL请求的http请求和响应正文是什么?

  18. 18

    带有richfaces 4.3的JSF 2-AJAX请求和呈现时重复ID

  19. 19

    URL中带有GET参数的AJAX POST请求

  20. 20

    发送带有“正文请求”的NSMutableURLRequest请求

  21. 21

    发送列表中每个URL的WS请求并将响应映射到新列表

  22. 22

    热销发送带有cljs-ajax且其主体键不带冒号的ajax请求

  23. 23

    热销发送带有cljs-ajax且其主体键不带冒号的ajax请求

  24. 24

    带有自定义HTTP POST请求和响应的jQuery Datatables服务器端分页

  25. 25

    Symfony2中的简单AJAX请求和响应

  26. 26

    带有ajax请求的Hightchart

  27. 27

    带有Bootstrap的AJAX请求

  28. 28

    通过nodejs下载响应POST请求而发送的文件?(没有AJAX)

  29. 29

    向php发送ajax请求时没有数据响应

热门标签

归档