使用AJAX跳转页面并传递<li>ID时遭遇405错误的技术问询

错误原因分析 #

POST 405错误核心是HTTP请求方法不匹配：你的JS代码大概率用了POST请求访问/Report/Index，但后端对应Action仅允许GET方法（ASP.NET MVC默认Action允许GET，若手动加[HttpPost]会拒绝GET请求，反之亦然）。另外，你的需求是页面跳转，完全没必要用AJAX——AJAX是用于无刷新获取数据的场景，页面跳转直接构造URL跳转更简洁高效。

方案一：直接跳转（推荐，无需AJAX） #

因为最终要跳转到~/report/create/theUniqueId，点击<li>时直接构造目标URL并跳转即可：

前端HTML（给<li>加data-id存储唯一ID）

<li data-id="id-1">选项1</li>
<li data-id="id-2">选项2</li>
<li data-id="id-3">选项3</li>
<li data-id="id-4">选项4</li>

前端JS代码

// 给所有带data-id的<li>绑定点击事件
document.querySelectorAll('li[data-id]').forEach(item => {
  item.addEventListener('click', function() {
    const uniqueId = this.getAttribute('data-id');
    // 构造目标URL并跳转
    window.location.href = `/report/create/${uniqueId}`;
  });
});

后端Action配置（ASP.NET MVC）

确保ReportController中有对应GET方法的Action：

public ActionResult Create(string id)
{
    // 根据id加载弹窗所需数据，比如存入ViewBag或ViewModel
    ViewBag.TargetId = id;
    return View();
}

同时确认路由配置能匹配/report/create/{id}，默认路由或自定义路由均可。

方案二：若坚持使用AJAX（不推荐，无实际必要） #

如果一定要用AJAX，需修正请求方法与后端Action的匹配性：

前端AJAX代码（改用GET请求）

document.querySelectorAll('li[data-id]').forEach(item => {
  item.addEventListener('click', function() {
    const uniqueId = this.getAttribute('data-id');
    fetch(`/report/Create?Id=${uniqueId}`, {
      method: 'GET'
    })
    .then(response => {
      if (response.ok) {
        window.location.href = `/report/create/${uniqueId}`;
      }
    })
    .catch(err => console.error('请求失败:', err));
  });
});

后端Action配置（明确允许GET）

[HttpGet]
public ActionResult Create(string id)
{
    // 处理数据逻辑
    return View();
}

关键注意事项 #

• 区分AJAX适用场景：仅在需要无刷新获取数据时使用AJAX，页面跳转用window.location.href是最优解。
• 405错误的核心解决方式：确保前端请求的HTTP方法（GET/POST）与后端Action允许的方法完全一致。
• 传递参数优先用URL路径或QueryString，符合REST风格，也便于调试。

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