Web API Post类型Action无法被jQuery Ajax调用，请求排查问题

你遇到的404错误核心原因是Web API的路由定义和你的Ajax请求参数传递方式不匹配。咱们一步步拆解问题并给出修复方案：

1. 核心问题：路由与参数传递不匹配 #

你的Web API Action通过Route("BookAppointment/{email}/{id}")定义了路由规则，这意味着email和id必须作为URL路径的一部分传递。但你的Ajax请求URL是api/Appointments/BookAppointment，完全没带上这两个参数，同时还把参数放到了POST请求的Body里，导致路由系统找不到对应的Action，直接返回404。

2. 两种可行的修复方案 #

方案一：修改Ajax请求，匹配现有路由定义 #

把email和id直接拼到URL路径里，不需要在请求Body中传递这两个参数：

$('#tblAppointments').on('click', '#btnbook', function () {
    var docid = $(this).closest('tr').find("input[id*='hdndocid']").val();
    var email = $(this).closest('tr').find("input[id*='hdnpatientemail']").val();
    // 把参数拼到URL路径，用encodeURIComponent处理特殊字符
    var baseurl = '@ConfigurationManager.AppSettings["baseAddress"]' + 
                  'api/Appointments/BookAppointment/' + 
                  encodeURIComponent(email) + '/' + docid;
    alert(baseurl);

    $.ajax({
        url: baseurl,
        type: 'POST',
        contentType: "application/json",
        success: function (data, textStatus, xhr) {
            console.log(data);
        },
        error: function (xhr, textStatus, errorThrown) {
            var err = JSON.parse(xhr.responseText); // 替代eval更安全
            alert('Error ' + err.Message);
            console.log(textStatus);
        }
    }).done(function () { });
});

方案二：修改Web API Action，从请求Body获取参数 #

如果你更倾向于POST请求的常规做法（参数放在Body里），可以调整Action的参数绑定方式并简化路由：

// 修改路由，移除路径参数
[System.Web.Http.HttpPost, System.Web.Http.Route("BookAppointment")]
public System.Net.Http.HttpResponseMessage BookAppointment([FromBody] AppointmentRequest request)
{
    System.Net.Http.HttpResponseMessage retObject = null;
    if (request.Id > 0 && !string.IsNullOrEmpty(request.Email))
    {
        UserAppointmentService _appservice = new UserAppointmentService();
        bool success = _appservice.BookAppointment(request.Email, request.Id);
        if (!success)
        {
            var message = string.Format("Error occurred while updating data for ID: {0}", request.Id);
            HttpError err = new HttpError(message);
            // 参数/业务错误用400(BadRequest)更合理，而非404(NotFound)
            retObject = Request.CreateErrorResponse(System.Net.HttpStatusCode.BadRequest, err);
            retObject.ReasonPhrase = message;
        }
        else
        {
            retObject = Request.CreateResponse(System.Net.HttpStatusCode.OK, "SUCCESS");
        }
    }
    else
    {
        var message = "Doctor ID and email cannot be zero or blank";
        HttpError err = new HttpError(message);
        retObject = Request.CreateErrorResponse(System.Net.HttpStatusCode.BadRequest, err);
        retObject.ReasonPhrase = message;
    }
    return retObject;
}

// 新增接收Body参数的实体类
public class AppointmentRequest
{
    public string Email { get; set; }
    public int Id { get; set; }
}

对应的Ajax代码可以保留原参数传递逻辑，注意把docid转成数字避免绑定失败：

$('#tblAppointments').on('click', '#btnbook', function () {
    var docid = parseInt($(this).closest('tr').find("input[id*='hdndocid']").val()); // 转为整数类型
    var email = $(this).closest('tr').find("input[id*='hdnpatientemail']").val();
    var baseurl = '@ConfigurationManager.AppSettings["baseAddress"]' + 'api/Appointments/BookAppointment';
    alert(baseurl);

    $.ajax({
        url: baseurl,
        type: 'POST',
        dataType: 'json',
        contentType: "application/json",
        data: JSON.stringify({ email: email, id: docid}),
        success: function (data, textStatus, xhr) {
            console.log(data);
        },
        error: function (xhr, textStatus, errorThrown) {
            var err = JSON.parse(xhr.responseText);
            alert('Error ' + err.Message);
            console.log(textStatus);
        }
    }).done(function () { });
});

3. 额外优化建议 #

• 错误状态码：参数无效或业务失败时，使用HttpStatusCode.BadRequest（400）比NotFound（404）更符合HTTP语义，404是指资源不存在，而非请求错误。
• 安全优化：用JSON.parse替代eval解析错误响应，避免潜在的安全风险。
• 参数验证：可以添加数据注解（如[Required]）简化参数验证逻辑，结合Web API的自动验证机制。

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