0

我想转到代码下方的链接之一：

    var  menukeuze;

   var AppRouter = Backbone.Router.extend({
        routes: {
            "menukeuze": "getPost",
            "*actions": "defaultRoute" // matches http://example.com/#anything-here
        }
    });
    // Instantiate the router
    var app_router = new AppRouter;
    app_router.on('route:getPost', function (menukeuze) {
        // Note the variable in the route definition being passed in here
        if (menukeuze == 'Welkom') { MakeRequest_goto(menukeuze); }
        if (menukeuze == 'Dogs1') { MakeRequest_goto(menukeuze); }
        if (menukeuze == 'Dogs2') { MakeRequest_goto(menukeuze); }
    });
    app_router.on('route:defaultRoute', function (actions) {
        MakeRequest_goto('Welkom');
    });
    // Start Backbone history a necessary step for bookmarkable URL's
    Backbone.history.start();

function MakeRequest_goto (ganaarpagina) {
                    $(document).ready(function() {
                    $('#div-main-content').fadeOut(function() { $.ajaxSetup( {
                    cache: false,
                    beforeSend: function() {
                    $('#div-main-content').fadeOut();
//                $('#content').hide();
//                $('#loading').show();
                    },
                    complete: function() {
//                $('#loading').hide();
//                $('#content').show();
                    },
                    success: function() {
//                $('#loading').hide();
                  $('#div-main-content').fadeIn();
//                  $('#div-main-content').show();
            }
        });
                    var $container = $("#div-main-content");
            //        $container.load(MakeRequest);
                    alert ("Loading: " + "page_" + ganaarpagina + ".php");
                            $container.load("page_" + ganaarpagina + ".php");
                }); }); }

我通过以下方式调用这些路线：

<td>
 <a href="#/menu/Welkom" >
 <img src="images/test1.png" />
 </td>

<td>
 <a href="#/menu/Dogs1" >
 <img src="images/test2.png" />
</td>

<td>
 <a href="#/menu/Dogs2" >
 <img src="images/test3.png" />
</td>

当我在浏览器中输入http://link.nl/#/menu/Welkom时，我得到了一个完美的页面，但 url 丢失了 #。当我刷新页面时，网络服务器说：找不到请求的 URL。（这是因为 URL 从带“#”变为不带“#”。）当我单击其中一个 href 时，它永远不会起作用，我收到一个：GET http://link.nl/Welkom?_=1365638638131 404（未找到）

如何通过这些路由 URL 加载 ajax？我已经尝试了以下站点的设置和信息，但没有帮助：

http://thomasdavis.github.io/examples/restful-app/

http://jsfiddle.net/ambiguous/xkZtB/

骨干路由器侦听器未命中哈希标记

我尝试了更多，但最终结果相同，或者没有任何“完整信息”。我希望有人看到我的问题？我正在使用的浏览器是：OSX 上的 Chrome v26。

我使用的java脚本是：

<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http:////ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://documentcloud.github.io/backbone/backbone-min.js'></script>

当我浏览到http://link.nl/站点时，默认路由正在工作。Link.nl 不是一个真实的站点，仅作为示例。问候，

4

1 回答 1

1

尝试以 pushState 为 true 启动 Backbone.history：

Backbone.history.start({pushState: "pushState" in window.history});

（该测试仅对兼容的浏览器启用 pushState。您可以手动将其设置为 true 或 false。请参阅此处的文档）

这将强制 url 始终没有 hashbang (#!/)。如果您总是想要它，请将其设置为 false。

现在，对于您的 404 错误，这是因为当您加载“真实”网址（link.nl/menu/Welkom）时，您的网络服务器（apache、nginx 等）将搜索此文件（静态文件或通过 url 重写虚拟一个）。由于找不到它（因为您希望它只存在于前端客户端，通过 Backbone），它会在向您显示页面之前返回 404 错误。

为了避免 404，您可以设置一个 url 重写规则，该规则将为您想要的任何 url 加载包含您的 javascript 的特定页面。

于 2013-04-11T08:17:42.870 回答