如何通过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
相关产品推荐
相关产品推荐

