jquery - ajax 成功函数未触发 MVC

Question

我正在尝试通过ajax查询在div中获取成功结果。

Ajax 查询将 model 值作为参数，并根据该值过滤结果。

这是我的ajax查询和查看页面-

@model IEnumerable<FunRanger.Models.TagModel>
@foreach (var item in Model) {
    <script type="text/javascript">
        $(function () {
            $('#' + '@item.tagId').click(function () {
                $.ajax({
                    url: '/Tag/TagFilter/?tagName=' + '@item.tagName',
                    type: 'post',
                    success: function (data) {
                        $('#funhome-partial').html(data);
                    }
                });
            });

        });
    </script>
    <div class="tags">
        <a href="#" id="@item.tagId">#@item.tagName</a>
    </div>

}

我试图在另一个 id 为“funhome-partial”的 div 中过滤此结果。该 div 位于我的项目的另一个项目文件中。

行动-

[HttpPost]
public ActionResult TagFilter(TagModel tag) {
    var cardlist = (from u in db.CardTables
                    where u.CardHashCode.Contains(tag.tagName)
                    select new CardModel {
                        cardHashCode = tag.tagName,
                        cardDate = u.CardDate,
                        cardFileName = u.CardFileName,
                        cardFilePath = u.CardFilePath,
                        cardID = u.CardID,
                        cardTitle = u.CardTitle
                    }).ToList();
    return View("FunHome", cardlist);

}

一切正常。我根据该参数获得过滤记录，我可以通过在此处放置断点来检查这些记录。

但是这个查询不会调用ajax的success函数并显示这个错误-

如果参数名为RipEnglish。

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:61203/Tag/TagFilter/?tagName=RipEnglish

我如何获得ajax成功结果，这也是一个很好的方法吗？

Answer 1

如果您没有丰富的 AJAX 经验，则可能很难对其进行故障排除。适用于所有现代浏览器的开发人员工具(或 FireBug)是您的 friend 。它们使查看/理解服务器作为响应返回的内容变得更加容易。

由于请求使用 Ajax，浏览器不会呈现返回的任何错误页面。

使用 Chrome(其他工具类似，通常使用 CTRL + SHIFT + I 或 F12 打开):

1. 使用 (CTRL + SHIFT + I) 打开开发人员工具 Pane 。
2. 点击网络标签。
3. 单击页面元素以触发单击处理程序并发送 Ajax 请求。
4. 在网络选项卡(左下角)中找到并单击网络请求。
5. 网络请求旁边的 Pane 包含“ header ”、“预览”和“响应”选项卡。

header 将向您显示请求的内容(发送到服务器的内容)。

响应将向您显示服务器响应的内容。这可能是成功请求的 JSON，或者如果发生错误，它可能是错误页面的 HTML 源。

预览选项卡将呈现服务器响应(如果可能)。如果您从服务器收到错误响应/页面，这尤其有用，因为您不必费力地浏览原始 HTML 来查找错误详细信息。

如果您的 AJAX 调用失败，并且服务器返回 500 错误，您可以随时检查服务器日志或查看“网络”>“预览”选项卡以查看返回的错误详细信息。您可以像处理任何传统服务器响应一样解决该错误。