如何用jQuery和AJAX创建支持直接访问的URL？

我来给你梳理两个实用的方案，都是基于你现有的jQuery+AJAX代码扩展，既能保留无刷新加载的体验，又能让用户直接在浏览器输入URL访问对应页面。

方案一：Hash模式（无需服务器配置，快速上手） #

这是最简单的实现方式，利用URL的#后面的hash值来控制页面内容，浏览器会自动保留hash的历史记录，直接输入带hash的URL也能正常加载对应内容。

第一步：修改导航链接 #

把你的导航元素加上带hash的href，比如：

<a href="#index" id="s-index">首页</a>
<a href="#about" id="s-about">关于我</a>
<a href="#projects" id="s-projects">我的项目</a>

第二步：扩展你的jQuery代码 #

在你现有的$(document).ready()里添加路由逻辑，监听hash变化并加载对应内容：

$(document).ready(function(){
    // 封装加载内容的函数，复用逻辑
    function loadContent(page) {
        $("#inhaltsbereich").load(`assets/pages/${page}.php`, function() {
            // 新内容加载完成后重新初始化AOS，确保动画生效
            AOS.init();
        });
    }

    // 处理页面初始加载：如果URL没有hash，默认加载index
    let initialPage = window.location.hash.slice(1) || 'index';
    loadContent(initialPage);

    // 监听URL的hash变化事件
    $(window).on('hashchange', function() {
        let targetPage = window.location.hash.slice(1) || 'index';
        loadContent(targetPage);
        // 可选：高亮当前选中的导航
        $('a[href^="#"]').removeClass('active');
        $(`a[href="#${targetPage}"]`).addClass('active');
    });

    // 原有的AOS初始化
    AOS.init();
});

这样一来，用户点击导航时URL会变成yourdomain.com/#about，直接在浏览器输入这个URL也能自动加载关于页面，完美满足你的需求。

方案二：History模式（干净URL，需要服务器配合） #

如果你想要更美观的URL（不带#，比如yourdomain.com/about），可以用HTML5的history.pushState API，不过这个方案需要服务器端做一点配置，避免直接访问子路径时出现404。

第一步：修改导航链接 #

给导航元素加上data-page属性，用来标记对应页面：

<a href="/about" data-page="about">关于我</a>
<a href="/projects" data-page="projects">我的项目</a>
<a href="/" data-page="index">首页</a>

第二步：扩展jQuery代码 #

$(document).ready(function(){
    // 封装加载内容函数
    function loadContent(page) {
        $("#inhaltsbereich").load(`assets/pages/${page}.php`, function() {
            AOS.init();
            // 可选：更新页面标题，提升用户体验
            document.title = page === 'index' ? '我的个人网站' : `${page.charAt(0).toUpperCase() + page.slice(1)} | 我的个人网站`;
        });
    }

    // 获取当前URL对应的页面
    function getCurrentPage() {
        let path = window.location.pathname;
        return path === '/' || path === '' ? 'index' : path.slice(1);
    }

    // 初始加载页面
    let initialPage = getCurrentPage();
    loadContent(initialPage);

    // 导航点击事件：阻止默认跳转，用pushState更新URL
    $('a[data-page]').on('click', function(e) {
        e.preventDefault();
        let targetPage = $(this).data('page');
        // 更新URL，不刷新页面
        history.pushState({page: targetPage}, '', targetPage === 'index' ? '/' : `/${targetPage}`);
        loadContent(targetPage);
        // 高亮当前导航
        $('a[data-page]').removeClass('active');
        $(this).addClass('active');
    });

    // 监听浏览器前进后退按钮
    $(window).on('popstate', function(e) {
        let targetPage = e.originalEvent.state?.page || 'index';
        loadContent(targetPage);
        // 高亮对应导航
        $('a[data-page]').removeClass('active');
        $(`a[data-page="${targetPage}"]`).addClass('active');
    });

    AOS.init();
});

第三步：服务器配置（以Apache为例） #

在网站根目录创建.htaccess文件，添加以下规则，把所有请求转发到index.php：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

这样配置后，用户直接输入yourdomain.com/about时，服务器会把请求转发到你的主页面，然后前端JS会根据路径加载对应的内容。

方案选择建议 #

• 如果你不想折腾服务器配置，Hash模式是最优选择，快速实现需求；
• 如果你追求更专业的URL样式，History模式更合适，只是需要额外的服务器配置。

内容的提问来源于stack exchange，提问作者Cor Angar