如何在MVC中通过Ajax向API控制器POST数据？请求排查与路由配置

一、前端Ajax代码修复 #

你的JS代码存在几处问题，修改后如下：

$(function () {
    $(".listing-listing").html("");

    const jsonData = { PageNom: 1, ShowInPage: 25 };
    const data = JSON.stringify(jsonData);
    $.ajax({
        url: '/Api/ApiListProduct/AjaxSearchAsync',
        type: 'POST',
        data: data,
        dataType: 'json', // 修正为json，前端不识别jsonResult
        contentType: "application/json; charset=utf-8",
        success: function (result) {
            if (result.Data.Succeed) {
                // 修正为JS标准的forEach（大写E）
                result.Data.ProductLst.forEach((product) => AddProduct(product));
                //$('.PaginationCell').html(result.Data.Pagination);
            }
        },
        error: function (e) {
            // 新增错误日志，方便排查问题
            console.log('请求错误详情:', e);
        }
    });
});

核心修复点：

• 移除重复的jQuery(function () {})嵌套，$(function())已足够实现DOM加载完成后执行
• dataType参数改为json，jsonResult是.NET后端类型，前端无法识别
• 修正数组遍历方法为JS标准的forEach
• 增加错误回调的日志输出，便于定位请求失败原因

二、API控制器代码优化 #

Web API控制器需使用专属的返回类型，同时可通过模型绑定简化参数读取：

using System.Web.Http;
using System.Collections.Generic;
using System.Threading.Tasks;

public class ApiListProductController : ApiController 
{
    [HttpPost]
    public async Task<IHttpActionResult> AjaxSearchAsync(SearchRequest request)
    {
        // 直接通过模型绑定获取参数，无需手动读取请求流
        int pageNom = request.PageNom;
        int showInPage = request.ShowInPage;

        // 示例业务逻辑，替换为你的实际处理代码
        var response = new {
            Data = new {
                Succeed = true,
                ProductLst = new List<object>(), // 替换为你的产品数据列表
                Pagination = ""
            }
        };

        return Json(response);
    }
}

// 定义接收前端参数的模型类
public class SearchRequest
{
    public int PageNom { get; set; }
    public int ShowInPage { get; set; }
}

优化点：

• 控制器命名改为ApiListProductController，遵循.NET PascalCase命名规范，确保路由匹配顺畅
• 返回类型使用Web API专属的IHttpActionResult，避免混用MVC的JsonResult
• 定义SearchRequest模型类，让Web API自动完成JSON参数绑定，无需手动读取请求流
• 补充返回逻辑，原代码无返回值会导致请求超时或异常

三、Web API路由配置 #

在App_Start/WebApiConfig.cs文件中配置路由，确保API请求能正确匹配到控制器方法：

using System.Web.Http;

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // 开启特性路由（可选，若需自定义路由可使用[Route]特性）
        config.MapHttpAttributeRoutes();

        // 默认API路由规则
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

同时在Global.asax.cs中优先注册Web API路由：

protected void Application_Start()
{
    // 先注册Web API路由，避免被MVC路由拦截
    GlobalConfiguration.Configure(WebApiConfig.Register);
    AreaRegistration.RegisterAllAreas();
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    // 其他初始化配置...
}

配置说明：

• 默认路由模板api/{controller}/{action}/{id}可直接匹配你的请求地址/Api/ApiListProduct/AjaxSearchAsync
• Web API路由必须在MVC路由之前注册，防止API请求被MVC路由错误拦截

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