阻止点击加载网站并加载其他一些自定义内容？

Question

我正在开发一个项目,用户可以点击链接获取有关它的其他信息.如果重要的话,网站使用Bootstrap Framework.额外的信息存储在服务器上的文件中.以下是调用函数的代码openModal:

$('a.modal-link').on('click', openModal);

这是此函数的JavaScript代码:

function openModal() {
  var link = $(this).attr("href");
  var page = "url-of-current-page";
  var text = $(this).text();

  $.ajax({
    type: "POST",
    url: "path/to/getdata.php",
    data: {
      link: link,
      page: page
    },
    success: function(content) {
      $(".modal-body").html(content);
    }
 })
};

这应该将HTML设置为modal-body我收到的数据.但是link在简要显示我的数据后,它会加载模态内部的实际值.我怎么能防止这种情况？

如果我需要在downvoting之前添加更多详细信息,请告诉我们.

Answer 1

当您单击锚点时,您可能希望阻止它重定向,将功能更改为

function openModal(e) {
  e.preventDefault();

  var link = $(this).attr("href");
  var page = "url-of-current-page";
  var text = $(this).text();

  $.ajax({
    type: "POST",
    url: "path/to/getdata.php",
    data: {
      link: link,
      page: page
    },
    success: function(content) {
      $(".modal-body").html(content);
    }
  });
}