javascript - jquery:如何防止导航(链接/提交)？

Question

我想将我的网站转换为单页应用程序。 我尝试做的是捕获导航过程: 例如:

<a href="myData.php">Change My Data</a>

当用户单击“更改我的数据”链接(或任何其他链接)时，我想捕获该单击并使用 ajax 加载内容(myData.php)并将其显示到我的 mainContent div 中。

<div id="mainContent"></div>

问题是:我无法阻止点击:我尝试过但没有成功:

$( window ).unload(function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  return "Handler for .unload() called.";
});

知道如何防止默认点击(然后是表单 POST 和 GET)，并获取目标 url，以便我可以通过 ajax 加载它并显示到我的 div 内容中吗？

Answer 1

您可以定位 anchor 元素本身，而不是定位 unload 方法。例如:

$("a").click(function(e){
    e.preventDefault();
    $("#mainContent").load($(this).attr("href"));
});

但这非常通用，并且包括定位外部应用程序链接。因此，我建议使用 data 属性标记现有 anchor ，以确保您仅将特定链接转换为 AJAX 调用:

<a href="myData.php" data-loadajax="true">Change My Data</a>

$("a").click(function(e){
    if ($(this).data("loadajax")){
       e.preventDefault();
       $("#mainContent").load($(this).attr("href") + " #mainContent");
    }
});