ASP.NET MVC Controller的Create方法执行成功后Ajax无响应、跳转失效问题

问题原因 #

1. 你绑定点击事件的#btn_submit按钮是表单内的submit类型按钮，点击后除了触发你写的AJAX逻辑之外，还会触发表单的默认提交行为：表单会以GET方式提交数据到当前地址，页面直接刷新，你发送的AJAX请求还没收到响应就被中断，自然收不到后端返回的JSON结果，后端返回的302跳转也不会被AJAX自动执行。这也是你会看到地址栏带上所有表单参数的核心原因。
2. 你的AJAX success回调里还有笔误：你写了console.log(data)，但这个data变量没有定义，后续修复时需要删掉或者修正。

修复方案 #

你可以任选以下任意一种方案解决问题：

方案1：阻止按钮点击的默认行为 #

在按钮的点击事件回调第一行加e.preventDefault()，阻止表单默认提交：

$(document).ready(function () {
    $('#btn_submit').click(function (e) { // 新增事件参数e
        e.preventDefault(); // 加上这行阻止默认提交行为
        var testModel = {
            FirstName: $('#FirstName').val(),
            LastName: $('#LastName').val(),
            Gender: $("input[name='Gender']:checked").val(),
            Contact: $('#Contact').val(),
            Faculty: $('#Faculty').val(),
            RegNepaliDate: $('#RegNepaliDate').val()
        };
        alert(JSON.stringify(testModel));

        $.ajax({
            type: "POST",
            url: "/TestModels/Create", 
            data: JSON.stringify(testModel),
            contentType: "application/json;charset=utf-8",
            dataType: 'json',
            success: function (response) {
                console.log(response);
                if (response.success) {
                    console.log(response.responseText);
                    // 如果需要跳转到Index页，手动加下面这行即可
                    // window.location.href = '/TestModels/Index';
                }
            },
            error: function (response) {
                alert("failed...");
              }  
        })
    })
})

方案2：把提交按钮改成普通按钮 #

直接修改表单按钮的type属性，把原来的submit类型改成普通button类型，这种按钮不会触发表单默认提交行为，不需要修改JS代码就能生效：

<!-- 修改前 -->
<button type="submit" id="btn_submit">提交</button>
<!-- 修改后 -->
<button type="button" id="btn_submit">提交</button>

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