如何在JavaScript中访问ASP子程序生成的JSON数据

方案一：同步渲染（页面刷新后注入数据） #

现有代码的问题是点击提交后，ASP直接输出JSON替换了整个页面，导致无法在原页面的JavaScript中处理数据。可以调整逻辑，将JSON数据注入到页面的JS变量中：

修改ASP代码 #

调整search子程序，避免直接输出JSON，转而将数据暂存或直接嵌入页面：

<%
sub search
     Dim cn
     Dim rs
     Dim sSQL
     Dim JSON

    set cn = Server.CreateObject("ADODB.Connection")
    cn.Open "ConnectionString"
    sSQL = "SELECT * FROM tbl_offices"
    set rs = cn.Execute(sSQL)
    JSON = RStoJSON(rs)

    ' 将JSON暂存到Session，或直接在页面输出时使用
    Session("OfficeJSON") = JSON

    rs.Close
    set rs = nothing
    cn.close
    set cn = nothing
end sub
%>

页面嵌入JS变量 #

在表单下方的ASP判断中，将JSON输出为JS全局变量：

<form name="GO" method="post">
    <input type="text" name="Search" class="input_txt_search" />
    <input type = "submit" name="GO" value="GO"/>
</form>

<%
if Request.Form("GO") = "GO" then           
    search
End If
%>

<script>
// 仅在表单提交后注入数据，默认空数组
var officeData = <%= IIf(Request.Form("GO") = "GO", Session("OfficeJSON"), "[]") %>;
</script>

初始化DataTable #

在页面底部添加DataTable初始化代码，使用注入的officeData：

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<table id="officesTable" class="display" style="width:100%">
    <thead>
        <tr>
            <!-- 对应tbl_offices表的字段 -->
            <th>ID</th>
            <th>办公室名称</th>
            <th>地址</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
$(document).ready(function() {
    if (officeData.length > 0) {
        $('#officesTable').DataTable({
            data: officeData,
            columns: [
                { data: 'id' }, // 需与RStoJSON生成的字段名一致
                { data: 'office_name' },
                { data: 'address' }
            ]
        });
    }
});
</script>

方案二：异步AJAX请求（无刷新加载） #

这种方式无需刷新页面，体验更流畅，通过AJAX请求单独的ASP接口获取数据：

1. 创建ASP接口文件（getOffices.asp） #

该文件仅负责查询并输出JSON：

<%
Response.ContentType = "application/json" ' 设置响应类型为JSON

Dim cn
Dim rs
Dim sSQL
Dim JSON

set cn = Server.CreateObject("ADODB.Connection")
cn.Open "ConnectionString"
sSQL = "SELECT * FROM tbl_offices"
' 可选：支持搜索，添加参数化查询避免注入
' sSQL = "SELECT * FROM tbl_offices WHERE office_name LIKE ?"
' 此处需使用参数化查询替代直接拼接用户输入

set rs = cn.Execute(sSQL)
JSON = RStoJSON(rs)

Response.Write(JSON)

rs.Close
set rs = nothing
cn.close
set cn = nothing
%>

2. 修改主页面逻辑 #

阻止表单默认提交，用AJAX请求接口并更新DataTable：

<form name="GO" id="searchForm">
    <input type="text" name="Search" class="input_txt_search" />
    <input type = "submit" name="GO" value="GO"/>
</form>

<table id="officesTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>办公室名称</th>
            <th>地址</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<script>
$(document).ready(function() {
    // 初始化空DataTable
    var table = $('#officesTable').DataTable({
        columns: [
            { data: 'id' },
            { data: 'office_name' },
            { data: 'address' }
        ]
    });

    // 监听表单提交
    $('#searchForm').on('submit', function(e) {
        e.preventDefault();
        var searchKeyword = $('input[name="Search"]').val();
        
        $.ajax({
            url: 'getOffices.asp',
            type: 'GET',
            data: { search: searchKeyword }, // 传递搜索参数（可选）
            dataType: 'json',
            success: function(data) {
                table.clear().rows.add(data).draw();
            },
            error: function(xhr, status, error) {
                console.error('数据加载失败:', error);
            }
        });
    });
});
</script>

关键注意事项 #

• 确保RStoJSON生成合法JSON格式，字段名和字符串值必须用双引号包裹。
• 同步方案中，使用Session暂存数据后，可在页面加载完成后清空Session("OfficeJSON")，避免残留数据。
• 异步方案中，必须使用参数化查询处理用户输入，防止SQL注入风险。

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