使用jQuery AJAX调用.NET Core Razor Pages处理器的问题及代码示例

看了你贴的代码，我马上发现几个容易踩坑的地方，咱们一个个来修正和排查：

1. URL拼接的格式错误是重灾区 #

你写的URL里用了两个?，这会导致浏览器解析参数完全混乱。Razor Pages里，handler参数必须通过?handler=xxx来指定，其他参数得用&连接。

错误写法：

options.url = $(location).attr('href') + "/?SectionId=" + $("#SectionId").val() + "?handler=SelectByID";

正确的两种写法：

// 写法1：先指定handler，再用&传SectionId
options.url = $(location).attr('href') + "?handler=SelectByID&SectionId=" + $("#SectionId").val();

// 写法2：更推荐用后端生成URL（避免路径拼接出错）
// 先在Razor页面里加一行：<script>var selectByIDUrl = '@Url.Page("", "SelectByID")';</script>
// 然后前端直接用：options.url = selectByIDUrl + "?SectionId=" + $("#SectionId").val();

用@Url.Page()生成URL能自动处理路由、根路径这些问题，比前端硬拼靠谱多了。

2. Error回调的代码写错了 #

你在error函数里用options.error.val()，这完全不对。jQuery的AJAX error回调会给你三个参数：jqXHR、textStatus、errorThrown，得用这些来获取错误信息：

options.error = function (jqXHR, textStatus, errorThrown) {
    $("#msg").html(`Error while making Ajax call! 状态: ${textStatus}, 错误详情: ${errorThrown}`);
};

3. 确认后台处理器的配置是否正确 #

• 后台的处理器方法必须是public IActionResult OnGetSelectByID(int sectionId)（注意是OnGet开头，因为你用的是GET请求，Handler名称要和?handler=SelectByID对应）
• 检查参数名大小写：C#是大小写敏感的，前端传的SectionId要和后台的sectionId（或者你定义的参数名）一致
• 如果页面需要权限，确认这个处理器允许匿名访问，或者当前用户有权限调用

4. 可以试试更简洁的AJAX写法 #

jQuery的AJAX支持链式写法，可读性更好，给你重构一下：

$(document).ready(function () {
    $("#SectionId").change(function () {
        const sectionId = $(this).val();
        $.ajax({
            url: '@Url.Page("", "SelectByID")' + `?SectionId=${sectionId}`,
            type: "GET",
            dataType: "json",
            success: function (data) {
                // 这里写拿到数据后的逻辑，比如填充下拉框
                console.log("数据获取成功：", data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#msg").html(`Ajax调用出错！状态：${textStatus}，错误信息：${errorThrown}`);
            }
        });
    });
});

5. 调试小技巧 #

• 按F12打开浏览器开发者工具，切换到Network标签，看AJAX请求的状态码：404就是找不到处理器，400是参数有问题，500是后台抛异常
• 在后台处理器里加个断点或者日志，确认方法有没有被调用到

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