如何实现哈希变化及页面加载时执行Ajax（兼容无哈希URL）

这问题我碰到过好多次，其实只要调整下代码结构就能轻松解决～

你原来的代码只在URL存在哈希值的时候才通过trigger('hashchange')触发逻辑，无哈希的纯URL加载时，那个if (window.location.hash)判断不成立，自然就跳过了执行步骤。

最优的解决方案是把要执行的Ajax逻辑封装成独立函数，然后在两个时机调用它：页面初始加载时（不管有没有哈希），以及哈希值变化时。这样既避免了代码重复，又能覆盖所有场景。

具体代码示例如下：

// 第一步：把核心逻辑抽成独立函数，方便复用
function handleContentLoad() {
  // 可以先处理哈希值，比如去掉开头的#号，方便后续接口调用
  const activeHash = window.location.hash.replace('#', '');
  
  // 这里写你的Ajax请求逻辑
  $.ajax({
    // 无哈希时可以传默认参数，比如加载首页/默认数据
    url: `/your-api-endpoint/${activeHash || 'default'}`,
    method: 'GET',
    success: function(response) {
      // 处理返回的数据，比如渲染到页面容器里
      $('#content-container').html(response);
    },
    error: function(err) {
      // 别忘了处理错误情况
      console.error('加载内容失败:', err);
    }
  });
}

// 第二步：页面初始加载时直接执行一次，不管有没有哈希
handleContentLoad();

// 第三步：监听哈希变化事件，变化时再次执行逻辑
$(window).on('hashchange', handleContentLoad);

这样调整后：

• 打开纯URL（比如domain.com）时，handleContentLoad会直接执行，加载默认数据；
• 打开带哈希的URL（比如domain.com#hash）时，初始加载也会执行函数，加载对应哈希的内容；
• 后续哈希值变化时，同样会触发函数更新内容。

是不是比原来的写法更清晰也更可靠？

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