Jquery 将页面加载到 url 中 # 指定的 div答案

【问题标题】：Jquery load page to div specified by # in urlJquery 将页面加载到 url 中 # 指定的 div
【发布时间】：2015-05-27 17:40:16
【问题描述】：

我有一个基于 jquery 的网站，根本不需要刷新。但是当你刷新时，你会被扔到索引页面。我正在尝试在 url 中获取 # 系统（index#upload 会将 upload.php 加载到 #middle div）。现在我让这种系统以某种方式工作，但它一直在刷新我的 div，我不确定这是否是最好的方法：

if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    switch(hash) {
        case "files.php":

            $("#middle").load(hash);
        break;
        case "upload.php":
            $("#middle").load(hash);
        break;
        case "update.php":
            $("#middle").load(hash);
        break;
        case "changepassord.php":
            $("#middle").load(hash);
        break;
        case "options.php":
            $("#middle").load(hash);
        break;
    }
} else {

}

对此有更好的想法吗？顺便说一句，我也有这个链接栏，它应该与它一起工作（我已经有一个代码可以根据用户在此代码中单击的链接更改 #）

$(document).ready(function(){
    $('#sidenav a').click(function(e){
        e.preventDefault();
        href = $(this).attr('href');
        window.location.hash = href;
        urlLoad = href;
        $("#middle").load($(this).attr('href'));

    });
    $('#topbar .profile').click(function(e){
        e.preventDefault();
        $("#middle").load($(this).attr('href'));
    });
});

【问题讨论】：

你能提供一个指向你网站的链接，或者一个小提琴吗？我不确定我是否理解在您的上下文中“一直刷新我的 div”的确切含义。

标签： javascript jquery html url hashtag

【解决方案1】：

我会这样处理：

不要泄露整个文件名（包括 .php 扩展名），因为这使潜在的攻击者更容易找到起点相反，只使用名称部分。本质上，使用 “#files”作为您的标签，并加载页面 $("#middle").load(hash+".php"); 而不是开关/外壳，你可以使用数组来检查请求的文件是否被允许。
现在我们将如何实现它取决于您的动机是询问允许的文件名：a) 是吗因为还有其他的脚本一定不能加载进入文件？（您的清单很详尽）b) 还是这样您可以确保请求的文件存在并且不会有问题吗？（您的列表可能是动态的）

a) 你可以使用数组("files", "upload", "update" ...); 定义您允许的路径，并通过indexOf() 检查，是否是否允许该文件

对于 b)，您可能会使用 Ajax 或检查建议的 404 错误 here
最后，将 this 包裹在一个函数中，当你需要加载内容，所以你不必这样做几个地方。

没有更多信息，这是我所能提供的建议。希望对你有帮助。

【讨论】：

【解决方案2】：

这个方法有点模糊。此方法将从目录pages 获取页面并将文件类型.php 附加到页面。如果文件不存在，则不会发生任何事情（以防有人试图注入未知文件）。一旦文件被加载，它将替换#middle的内容

function loadPage(page) {
    $.get('pages/' + page + '.php', function(data) {
        $('#middle').html(data);
    });
}

【讨论】：