ASP.NET jQuery ajax 仅在调试浏览器时有效

问题：
为什么 ajax 通过 jQuery 调用 ASP.NET API 控制器，只有在我在浏览器上逐步执行 javascript 时才有效？

详情：
我正在使用 MS Visual Studio Express 2013 for the Web 在 Win7 机器上开发，使用 Firefox 作为浏览器。我的项目是 MVC 和 API 控制器的混合（在两个不同的控制器类中）。

我的视图通过jQuery对同一项目中的API控制器进行ajax POST调用。生成项目时，没有错误。浏览器中的调试器控制台未显示任何 JavaScript 错误。
GET ajax 调用工作得很好。但是，POST ajax 调用似乎调用了"/api/"而不是"/api/BacklogAPI"。我得到一个显示以下内容的页面：

"/"应用程序中的服务器错误。
找不到资源。
说明：HTTP 404。要查找的资源（或其依赖项之一）可能已被删除、名称已更改或暂时不可用。 请查看以下 URL 并确保拼写正确。

请求的网址：/api/

版本信息： Microsoft .NET 框架版本：4.0.30319

;ASP.NET 版本：4.0.30319.34237

如果我使用调试器逐步完成 javascript，则不会发生这种情况。我不知道为什么。

已经测试过：
API 控制器 POST 操作上的断点验证在正常使用期间是否未调用它（尽管应该调用）。
调试javascript，在我的ajax调用中使用断点，验证POST调用的URL是"/api/BacklogAPI"。这是正确的。当我逐步完成 javascript 的其余部分时，现在我的 API 控制器上的断点被命中了。为什么它只在我调试时才这样做？我尝试重新启动项目和浏览器，没有任何更改。

代码：这是控制器的代码（如果需要澄清，我可以披露业务逻辑或模型类......这是一个个人学习项目）：

using System.Collections.Generic;
using System.Web.Http;
using System.Net.Http;
using System.Net;
using WebApplication1.Models.WorkOrder;
using System.Linq;
namespace WebApplication1.Controllers
{
    public class BacklogAPIController : ApiController
    {
        private WOHolder holder = WOHolder.Current;
        [HttpGet]
        public IEnumerable<WorkOrder> GetAllWO()
        {
            return holder.GetAll();
        }
        [HttpGet]
        public WorkOrder GetWO(int id)
        {
            return holder.Get(id);
        }
        [HttpPost]
        public HttpResponseMessage AddWO(WorkOrder item)
        {
            holder.Add(item);
            var response = new HttpResponseMessage(HttpStatusCode.Created);
            return response;
        }
    }
}

对于视图：

@{
    Layout = "~/Views/Shared/_BacklogBasic.cshtml";
}
@section Scripts {
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
}
@section Header {
    Backlog Tester
}
@section Body {
    <form id="formInput" action="api/" method="post" enctype="application/x-www-form-urlencoded">
        Name: <input name="name" type="text" />
        <br />SN: <input name="serialNumber" type="text" />
        <br />Model: <input name="model" type="text" />
        <br /><input type="submit" value="Submit" />
    </form>
    <div id="divOutput"></div>
    <script>
        var uri = "/api/BacklogAPI";
        ShowAll();
        function ShowAll() {
            $.ajax({
                url: uri,
                type: "GET",
                dataType: "json"
            })
            .success(function (data) {
                var items = "";
                for (var i = 0; i < data.length; i++) {
                    items += data[i].name;
                    items += "<br />";
                }
                $("#divOutput").html(items);
            });
        }
        function PostForm(postInfo) {
            $.ajax({
                url: uri,
                type: "POST",
                data: postInfo
            })
            .success(function () {
                ShowAll();
            });
        }
        $("#formInput").submit(function () {
            PostForm($("#formInput").serialize());
        });
    </script>
}

$("#formInput").submit(function (evt) {
    evt.preventDefault();