如何通过JQuery Ajax在ASP Classic服务器端执行预订逻辑？

我正在开发一个无需数据库、仅支持单用户的ASP Classic简易登录页面，用于实现车辆的预订与取消功能，使用Application对象存储可预订及已预订车辆的数量。

我希望通过表格行上的按钮触发JQuery Ajax请求，修改对应车辆的预订状态，但找不到类似控制器方法的方式来处理$.post请求以执行指定逻辑。

当前使用如下$.post请求时，返回的是整个index.asp页面内容：

$.post("index.asp", function(data, status){
        console.log(data);
        console.log(status);
    });

我的ASP代码 #

<%@ language="javascript" %>
<html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <meta charset="utf-8">
    </head>
    <body>
        <table align=center>
            <tr>
                <td align=center>
                    <b> LOGIN </b>
                    <br>
                    <br>
                    <br>
                    <form method=post action="index.asp" >
                        UserName <input type=text name=uname /> <br>
                        Password <input type=password name=password /> <br><br>
                        <p align=right> <input type=submit value=login name=submit /> </p>
                    </form>
                </td>
            </tr>
        </table>
    </body>
</html>

<script>
function xtt(keyName){
    $.post("index.asp", function(data, status){
        console.log(data);
        console.log(status);
    });
}
</script>

<%
if (typeof Application("a") === "undefined") {
Application("a") = 1;
}else{
    Application("a") = Application("a") +1;
}

Response.Write (Application("a"));

function GetCarName(sName)
{
    if((sName = "MAZDA_FOR_BOOK") || (sName = "MAZDA_FOR_USER"))
    {
        GetCarName = "מאזדה";
    }
    else if((sName = "KIA_FOR_BOOK") || (sName = "KIA_FOR_USER"))
    {
        GetCarName = "קיה";
    }
    else if((sName = "SHEV_FOR_BOOK") || (sName = "SHEV_FOR_USER"))
    {
        GetCarName = "שברולט";
    }
    else {
     GetCarName = "דייהטסו";
    }
}

function WriteCarsTable(CarList, valueForSubmit, TestForSubmit){
    %>
            <table border='1'>
                <tr>
                    <td style='text-align: center;'> כמה רכבים </td>
                    <td style='text-align: center;'> סוג רכב </td>
                    <td style='text-align: center;'> <%TestForSubmit%></td>
                </tr>
            <%for(var i = 0; i < CarList.length; i++) {
                var key = CarList[i];%>
                <tr>
                    <td style='text-align: center;'><%=Application(key)%></td>
                    <td style='text-align: center;'><%=key%></td> 
                    <td style='text-align: center;'>
                           <input name=<%=key%> type=submit value=<%=valueForSubmit%> onClick=xtt('<%=key%>')></input>
                    </td>
                <tr>
            <%}%>
            </table>
    <%
 }
%>
    <label><%=submit%></label>
<%
    var CARS_SET_FOR_BOOK = [];
    CARS_SET_FOR_BOOK.length = 4;
    CARS_SET_FOR_BOOK[1] = "MAZDA_FOR_BOOK";
    CARS_SET_FOR_BOOK[2] = "KIA_FOR_BOOK";
    CARS_SET_FOR_BOOK[3] = "SHEV_FOR_BOOK";
    CARS_SET_FOR_BOOK[4] = "DAIH_FOR_BOOK";

    var CARS_SET_FOR_USER = [];
    CARS_SET_FOR_USER.length = 4;
    CARS_SET_FOR_USER[1] = "MAZDA_FOR_USER";
    CARS_SET_FOR_USER[2] = "KIA_FOR_USER";
    CARS_SET_FOR_USER[3] = "SHEV_FOR_USER";
    CARS_SET_FOR_USER[4] = "DAIH_FOR_USER";

   if (typeof Application("init") === "undefined") 
   {
        Application(CARS_SET_FOR_BOOK[1]) = 1;
        Application(CARS_SET_FOR_BOOK[2]) = 2;
        Application(CARS_SET_FOR_BOOK[3]) = 3;
        Application(CARS_SET_FOR_BOOK[4]) = 4;

        Application(CARS_SET_FOR_USER[1]) = 0;
        Application(CARS_SET_FOR_USER[2]) = 0;
        Application(CARS_SET_FOR_USER[3]) = 0;
        Application(CARS_SET_FOR_USER[4]) = 0;
        Application("init") = true;
   }

    Response.Write (Request.Form);
    var res= Request.Form("uname")
    
    WriteCarsTable(CARS_SET_FOR_BOOK,"הזמן רכב","רכבים להזמנה")
    WriteCarsTable(CARS_SET_FOR_USER,"החזר רכב","רכבים שהוזמנו")

    var submit = Request.Form("submit")
    name = Request.Form("name")
    Response.Write (name)
%>

1. 给Ajax请求添加标识参数 #

在$.post请求中额外传递参数，告诉ASP页面这是Ajax请求，需执行特定逻辑而非返回整个页面：

function xtt(keyName){
    $.post("index.asp", {action: "update_car_status", carKey: keyName}, function(data, status){
        console.log(data);
        console.log(status);
        // 根据返回结果更新页面车辆数量，比如修改对应行的数值
        if(data.success){
            // 找到对应行更新数量
            var row = document.querySelector(`input[name='${keyName}']`).closest('tr');
            row.querySelector('td:first-child').textContent = 
                keyName.includes('_FOR_BOOK') ? data.bookCount : data.userCount;
        }else{
            alert(data.message);
        }
    }, "json"); // 指定接收JSON格式数据
}

2. 在ASP页面开头处理Ajax请求 #

在ASP代码最开始位置，检查请求参数，处理Ajax逻辑后输出结果并终止页面执行：

<%@ language="javascript" %>
<%
// 优先处理Ajax请求
var action = Request.Form("action");
if(action === "update_car_status"){
    var carKey = Request.Form("carKey");
    var result = {success: false, message: ""};

    // 判断是预订还是取消操作
    if(carKey.indexOf("_FOR_BOOK") !== -1){
        // 预订车辆：减少可预订数，增加已预订数
        var userKey = carKey.replace("_FOR_BOOK", "_FOR_USER");
        if(Application(carKey) > 0){
            Application.Lock(); // 加锁避免并发问题
            Application(carKey) -= 1;
            Application(userKey) += 1;
            Application.UnLock();
            result.success = true;
            result.bookCount = Application(carKey);
            result.userCount = Application(userKey);
        }else{
            result.message = "该车辆已无剩余可预订数量";
        }
    }else if(carKey.indexOf("_FOR_USER") !== -1){
        // 取消预订：减少已预订数，增加可预订数
        var bookKey = carKey.replace("_FOR_USER", "_FOR_BOOK");
        if(Application(carKey) > 0){
            Application.Lock();
            Application(carKey) -= 1;
            Application(bookKey) += 1;
            Application.UnLock();
            result.success = true;
            result.bookCount = Application(bookKey);
            result.userCount = Application(carKey);
        }else{
            result.message = "你没有预订该车辆";
        }
    }else{
        result.message = "无效的车辆标识";
    }

    // 设置返回类型为JSON
    Response.ContentType = "application/json";
    // 输出JSON结果
    Response.Write(JSON.stringify(result));
    // 终止页面后续执行，避免返回整个HTML
    Response.End();
}
%>
<!-- 原有的HTML和ASP代码从这里开始 -->

3. 修复现有代码的小问题 #

• GetCarName函数中用了赋值运算符=，替换为相等判断===：

function GetCarName(sName)
{
    if((sName === "MAZDA_FOR_BOOK") || (sName === "MAZDA_FOR_USER"))
    {
        GetCarName = "מאזדה";
    }
    else if((sName === "KIA_FOR_BOOK") || (sName === "KIA_FOR_USER"))
    {
        GetCarName = "קיה";
    }
    else if((sName === "SHEV_FOR_BOOK") || (sName === "SHEV_FOR_USER"))
    {
        GetCarName = "שברולט";
    }
    else {
     GetCarName = "דייהטסו";
    }
}

• 表格行闭合标签错误，将<tr>改为</tr>：

</tr>

• 按钮类型改为button，避免触发表单提交：

<input name=<%=key%> type="button" value=<%=valueForSubmit%> onClick=xtt('<%=key%>')>

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