使用标签 data-* 实现 Ajax 调用

Posted 2023-02-22

【中文标题】使用标签 data-* 实现 Ajax 调用

【英文标题】：Implement an Ajax call using the tags data-*

【发布时间】：2017-08-15 19:25:17

【问题描述】：

我正在尝试，如在 jquery-ajax-unobtrusive

我知道我可以使用带有 $.ajax() 的 javascript 函数，但我的目的是尝试使用标签 data-ajax...

我在cshtml文件中试过这段代码

<a class="btn btn-primary" data-ajax-url="/Home/AjaxSample" data-ajax="true" data-ajax-success="AjaxSuccess" data-ajax-failure="AjaxError" data-ajax-method="GET">Ajax</a>

// other code...

function AjaxSuccess()  alert('AjaxSuccess'); 
function AjaxError()  alert('AjaxError'); 

浏览器当然会显示按钮，但是当我单击它时没有任何反应。 我在浏览器调试器中找不到任何错误。显然什么都没有发生。

Intellisense 不显示标签 data-ajax 和朋友。 我是不是忘了包括一些东西？

有没有完整的工作示例？

【问题讨论】：

我认为没有为它安装参考，使用nuget安装它然后尝试

感谢 Pathik；我使用 NuGet 添加了 Microsoft.jQuery.Unobtrusive.Ajax 和 Microsoft.jQuery.Unobtrusive.Validation 但没有任何变化

找到了，是我的错！不要忘记在 _Layout.cshtml

中添加

@Tonyc - 我正在为 标签获取数据 ajax 等的 Intellisense，但不是在

@Tonyc：您可以将评论添加为答案并接受吗？

【参考方案1】：

来自cmets的答案（因为没有人添加它）：

<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.j‌​s"></script>
<!-- the ~ is to symbolize your project's wwwroot folder

将以上内容与所有其他脚本一起添加到您的主布局中（默认为_Layout.cshtml）。

这样做的目的是将 jQuery 不显眼的 ajax 文件包含到您的所有页面中，以便包含完成所有工作的主脚本。

在执行此操作之前，请确保您已安装软件包 Microsoft.Jquery.Unobtrusive.Ajax