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

Question

问题:
为什么通过 jQuery 对 ASP.NET API Controller 的 ajax 调用仅在我在浏览器上单步执行 javascript 时有效？

详情:
我正在使用 MS Visual Studio Express 2013 for Web 在 Win7 机器上使用 Firefox 作为浏览器进行开发。我的项目混合了 MVC 和 API Controller (在两个不同的 Controller 类中)。

我的 View 通过 jQuery 对同一项目中的 API Controller 进行 ajax POST 调用。构建项目时，没有错误。浏览器中的调试器控制台未显示任何 javascript 错误。
GET ajax 调用工作得很好。但是，POST ajax 调用似乎调用“/api/”而不是“/api/BacklogAPI”。我得到一个显示的页面:

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

请求的 URL:/api/

版本信息:Microsoft .NET Framework 版本:4.0.30319； ASP.NET 版本:4.0.30319.34237

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

已经测试:
API Controller POST 操作上的断点验证它在正常使用期间没有被调用(尽管它应该被调用)。
在我的 ajax 调用中使用断点调试 javascript，验证 POST 调用的 url 是“/api/BacklogAPI”。这是对的。当我单步执行 javascript 的其余部分时，现在我的 API Controller 上的断点被击中了。为什么它只在我调试时这样做？ 我试过重新启动项目和浏览器，没有任何变化。

代码: 这是 Controller 的代码(如果需要澄清，我可以公开业务逻辑或模型类......这是一个个人学习项目):

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;
        }
    }
}

对于 View :

@{
    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>
}

Answer 1

取消表单提交

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