为啥我的 Jquery Ajax 调用不起作用？（Asp.net MVC C#）

Posted 2023-04-13

【中文标题】为啥我的 Jquery Ajax 调用不起作用？（Asp.net MVC C#）

【英文标题】：Why is my Jquery Ajax call not working?(Asp.net MVC C#)为什么我的 Jquery Ajax 调用不起作用？（Asp.net MVC C#）

【发布时间】：2020-05-15 06:54:58

【问题描述】：

我的目标是使用 ajax 从我的控制器中检索一些数据并将其附加到我视图中的表格元素中。然而，javascript 代码仅在“$.ajax(” 时才停止运行。我在上述点之后放置了一些断点，但代码从未在这些点“中断”。

这是javascript代码

$(document).ready(function ()

    $("#DivisionId").change(function () 
        var OptionId = $('#DivisionId').val();
        var position = 0;
        $.ajax(
            
                type: 'POST',
                url: '@URL.Action("Division")',
                dataType: 'json',
                data:  DivisionId: OptionId ,
                success: function (data) 
                    var LogStandings = '';
                    $.each(data, function (i, log) 
                        position++;
                        var Logs = "<tr>" +
                            "<td>" + position + "</td>" +
                            "<td>" + log.Logs1.Team.TeamName + "</td>" +
                            "<td>" + log.Logs1.Played + "</td>" +
                            "<td>" + log.Logs1.Win + "</td>" +
                            "<td>" + log.Logs1.Draw + "</td>" +
                            "<td>" + log.Logs1.Lost + "</td>" +
                            "<td>" + log.Logs1.GoalsFor + "</td>" +
                            "<td>" + log.Logs1.GoalsAgainst + "</td>" +
                            "<td>" + log.Logs1.GoalDifference + "</td>" +
                            "<td>" + log.Logs1.Points + "</td>" +
                            "</tr>";
                        $('#TheLog').append(Logs);
                    );

                ,
                error: function (ex) 
                    var r = jQuery.parseJSON(response.responseText);
                    alert("Message: " + r.Message);
                    alert("StackTrace: " + r.StackTrace);
                    alert("ExceptionType: " + r.ExceptionType);
                
            );
        return false;

    ); // end of Division on change function

)//End of document.ready function

这是我控制器中的代码

        public JsonResult Division(int DivisionId)
        
            int UnderId = db.Under.FirstOrDefault().UnderID;
            MainDivisionId = id;


            List<FixtureModel> Fixtures = db.Fixtures.Where(f => f.TeamModel.DivisionId == id && f.TeamModel.UnderId == UnderId).ToList();
            List<ResultModel> Results = db.Results.Where(r => r.Fixtures.TeamModel.DivisionId == id && r.Fixtures.TeamModel.UnderId == UnderId).ToList();
            List<LogModel> Logs = db.Logs.Where(l => l.Team.DivisionId == id && l.Team.UnderId == UnderId).ToList();

            IndexViewModel IndexPage = new IndexViewModel(Fixtures, Results, Logs);

            return Json(IndexPage , JsonRequestBehavior.AllowGet);
        

我在互联网上进行了一些搜索，一位消息人士建议我将我的 jquery CDN 放在 head 标签内的视图顶部，但这并没有解决我的问题。除此之外，经过一个小时的搜索，我还没有找到任何其他解决方案。

【问题讨论】：

请求到达你的控制器？

它没有。 JavaScript代码的执行没有通过“$.Ajax”部分

您的 ajax 调用指定了 POST...您的控制器方法上是否有 [HttpPost] 属性？另外，你设置的断点到底在哪里？例如，他们是在return false 上吗？还是在success 或error 回调中？

尝试将JSON.stringify 添加到您的数据中

@David784 我没有 [HttpPost] 属性。让我现在试试。断点是 1。就在 ajax 部分的上方，代码在该点中断。 2.通过LogStandings变量，此时代码没有中断。

【参考方案1】：

我可以看到您有 2 个问题。

首先，您向没有[HttpPost] 注释的控制器操作发出POST 请求。在我看来，您正在获取/选择数据，GET 请求会更合适，所以我在下面的示例中使用了它。

其次，您不能在 javascript 字符串中使用@URL.Action("Division")（或一般在 javascript 中。如果您真的需要，那么您可以将一些数据存储在隐藏的 div 中并使用 javascript/jquery 获取值），就像您一样试图做。在脚本本身上，这将在您直接向localhost:12345/@URL.Action("Division") 发出请求时呈现，这不是有效的路径。请看下面的例子：

脚本：

$(document).ready(function () 
    $("#testButton").on("click", function () 
        var OptionId = 1;

        $.ajax(
            
                type: 'GET',
                //this url assumes your controller action is in HomeController.cs
                url: '/Home/Division/' + OptionId,
                dataType: 'json',
                data:  DivisionId: OptionId ,
                success: function (data) 
                    alert("success");

                ,
                error: function (ex) 
                    var r = jQuery.parseJSON(response.responseText);
                    alert("Message: " + r.Message);
                    alert("StackTrace: " + r.StackTrace);
                    alert("ExceptionType: " + r.ExceptionType);
                
            );
    );
);

HomeController.cs 动作：

public JsonResult Division(int DivisionId)

    return Json(1, JsonRequestBehavior.AllowGet);

在我看来是为了测试：

<button type="button" id="testButton" class="btn btn-primary btn-lg">TEST BUTTON</button>

上述测试按预期工作（接收DivisionID 参数，从控制器操作返回数据并向客户端发出成功警报）。通过上面概述的更改，当您指定有效路径并发出适当的请求类型时，控制器操作中的断点将被命中。希望这会有所帮助。

【讨论】：

我有点困惑。似乎在您的解释中您说我应该通过 ajax 部分更改我的 url 值，但您没有在示例代码中更改您的值。搞错了吗？

我在这里按照你的例子，但我仍然面临同样的问题。我在 $.Ajax 部分上方放置了一个断点，当我在 IDE 中单击继续时，程序崩溃并且 Chrome 显示“哦，快，尝试查看网页时出错了”。

您的控制器中是否出现任何控制台错误或异常？我不确定在这里还能做什么，因为我创建了一个空白的 MVC 解决方案和最简单的测试用例，它重新创建了您的问题，然后进行了调整以使其可操作（并成功测试）。尝试从客户端删除断点，然后将一个断点放在控制器操作的开头，看看它是否被命中（如果你做了建议的更改，它应该）

您还可以利用 chrome 调试器中的网络选项卡来验证正在发出请求，验证正在发出请求的路径并验证正在发送的数据（Fiddler 等工具也是对测试这些调用很有帮助）

在 chrome 调试器中使用网络选项卡非常有帮助。似乎 Ajaz 使用的 URL 是 localhost:1171/Website/Division?DivisionId=2 ，这就是我们遇到问题的原因。