You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何通过AJAX点击事件加载ASP Classic Include文件更新div内容

核心失效原因

<!--#Include File="xxx"--> 是ASP Classic的服务端预处理指令,IIS会在页面发送到用户浏览器之前,就完成所有include指令的解析、文件拼接工作。等页面加载到浏览器端后,你再用JavaScript往DOM里插入这段字符串,它只会被识别为普通HTML注释,不会触发任何服务端解析或文件加载逻辑,自然不可能生效。

实现方案

方案1:修正AJAX逻辑(保留无刷新交互,推荐)

你不需要在前端拼接include指令,直接通过AJAX请求目标ASP文件,把服务端返回的渲染完成的内容插入容器即可,改动量极小。

修改后的JavaScript代码:

function test(fileName) {
  // 可选:加加载态优化体验
  $("#result").html('<div class="text-center py-5">内容加载中...</div>');
  $.ajax({
    method: "GET",
    url: fileName, // 直接请求目标子页面
    success: function (response) {
      $("#result").html(response);
    },
    error: function (xhr) {
      $("#result").html('<div class="alert alert-danger">加载失败,请刷新重试</div>');
      console.error(xhr);
    }
  });
}

注意事项:

  • 被加载的solicitar.asp、consultar.asp等子文件,不要写完整的<html>、<head>、<body>标签,只保留需要显示在#result区域内的内容片段即可,避免DOM结构嵌套错乱。
  • 如果需要保留子页面的独立访问能力,可以在子页面顶部加判断:检测请求头里的X-Requested-With是否为XMLHttpRequest,如果是AJAX请求就只返回内容片段,如果是普通访问就返回带完整页面结构的内容。

方案2:服务端传参渲染(无JS依赖,兼容性最好)

如果不需要无刷新交互,可以完全靠ASP原生能力实现,不需要写JavaScript,点击导航时通过URL传参,服务端判断后动态加载对应include文件。

首先修改导航链接:

<nav class="navbar navbar-light bg-light sticky-top shadow">
  <span><%=rs(2)%></span>
  <ul class="nav nav-pills ml-4">
    <li class="nav-item">
      <a class="nav-link" href="?page=solicitar" id="solicitar">Solicitar</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="?page=consultar" id="consultar">Consultar</a>
    </li>
  </ul>
  <a class="navbar-brand mx-auto" href="">
    <img src="../imgs/logos/4_COL-1.jpg" width="200" height="50" class="d-inline-block align-top" alt="">
  </a>
  <span><%=date%></span>
</nav>

然后在#result容器位置写服务端逻辑:

<div class="container-fluid" id="result">
<%
Dim pageName
pageName = Trim(Request.QueryString("page"))
Select Case pageName
  Case "solicitar"
    %><!--#Include File="solicitar.asp"--><%
  Case "consultar"
    %><!--#Include File="consultar.asp"--><%
  Case Else
    ' 这里放默认加载的首页内容
    %><!--#Include File="home.asp"--><%
End Select
%>
</div>

这个方案逻辑最稳定,兼容所有浏览器,缺点是点击导航会触发整页刷新。


内容的提问来源于stack exchange,提问作者Pau Serra Sans

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.03 04:24:24