单切换按钮对应单表单，提交时如何保持页面滚动位置

问题根源：你当前使用this.form.submit()提交表单会触发页面整体刷新，导致滚动位置丢失。改用AJAX异步提交可在后台完成保存操作，页面无刷新，滚动位置自然保留。

以下是针对Classic ASP新手的分步修改方案：

第一步：修改后端ASP处理逻辑 #

移除Response.Redirect跳转，改为返回JSON格式的响应，告知前端操作结果：

<%
    If Request("mode") = "msgfromadmin" Then
        Dim dato10, vUser10, msgfromadmin
        dato10 = Day(Date) & "/" & Month(Date) & "/" & Year(Date) & " " & Time()
        vUser10 = SQLEncode(Session("username"))

        ' 解析开关状态
        If Request.Form("msgfromadmin") = LCase("on") Then
            msgfromadmin = 1
        Else
            msgfromadmin = 0
        End If

        ' 执行数据库更新
        Conn.Execute("UPDATE usersettings SET msgfromadmin = " & msgfromadmin & " WHERE username = '" & SQLEncode(Session("username")) & "'")

        ' 返回AJAX可识别的JSON响应
        Response.ContentType = "application/json"
        Response.Write "{""status"": ""success"", ""value"": " & msgfromadmin & "}"
        Response.End ' 终止响应，避免输出后续页面内容
    End If
%>

第二步：调整前端开关HTML结构 #

删除开关的onChange="this.form.submit()"属性，给开关添加唯一ID以便JS定位：

<form name="msgfromadmin" action="/profile/mysettings/" method="post">
<input type="hidden" name="mode" value="msgfromadmin">
<div class="col-12 form-group row mt-4">
    <div class="col-1 form-group text-center">
        <label class="switch">
            <input type="checkbox" id="msgfromadminSwitch" name="msgfromadmin" <% If RSchosenSetting("msgfromadmin") = 1 Then %> checked<% End If %>>
            <span class="slider"></span>
        </label>
    </div>
    <div class="col-11 form-group">
        Send a mail when there's a message from admin
    </div>
</div>
</form>

第三步：添加AJAX提交的JavaScript代码 #

在</body>标签前插入以下JS，监听开关变化并异步提交数据：

<script>
// 获取开关DOM元素
const switchBtn = document.getElementById('msgfromadminSwitch');

// 监听开关状态变化事件
switchBtn.addEventListener('change', function() {
    // 创建AJAX请求对象
    const xhr = new XMLHttpRequest();
    // 设置请求方式与目标地址
    xhr.open('POST', '/profile/mysettings/', true);
    // 声明请求数据格式为表单数据
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // 请求成功后的处理逻辑
    xhr.onload = function() {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.status === 'success') {
                console.log('设置已保存');
                // 可在此添加成功提示（如alert或页面提示框）
            } else {
                // 保存失败时，恢复开关原有状态
                switchBtn.checked = (response.value === 1);
                console.log('保存失败，请重试');
            }
        } else {
            // 请求出错时恢复开关状态
            switchBtn.checked = !switchBtn.checked;
            console.log('请求出错');
        }
    };

    // 网络错误处理
    xhr.onerror = function() {
        switchBtn.checked = !switchBtn.checked;
        console.log('网络连接失败');
    };

    // 组装提交参数
    const formData = `mode=msgfromadmin&msgfromadmin=${switchBtn.checked ? 'on' : 'off'}`;
    // 发送异步请求
    xhr.send(formData);
});
</script>

方案优势 #

• 无刷新提交：AJAX在后台完成请求，页面无刷新，滚动位置完全保留。
• 状态一致性：请求失败时自动恢复开关状态，避免界面与数据库状态不一致。
• 可扩展性：后端返回的JSON响应可用于添加自定义提示，提升用户体验。

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