ajax - jquery/ajax 加载脚本 - 最佳实践

Question

我正在尝试掌握使用 ajax 加载(主要通过 jquery)的技巧，以使我的网站更加高效。想知道是否有人可以提供有关使用 ajax 的“最佳实践”的任何建议？

有没有办法简化多个 ajax 调用的脚本？例如，我目前有工作脚本:

$(document).ready(function() {
  $('#dog').click(function () {
      $('#body').load("dog.html");      
  });
  $('#cat').click(function () {
      $('#body').load("cat.html");      
  });
  $('#bird').click(function () {
      $('#body').load("bird.html");     
  });
  $('#lizard').click(function () {
      $('#body').load("lizard.html");       
  });
});

每添加一个函数，脚本就会变得越来越长。有没有更简单、更高效的方法来编写这个脚本来覆盖多个加载脚本？

此外，我应该使用 ajax 加载来替换大部分实际链接吗？

Answer 1

这是一个建议，因为您发布的代码似乎在 id 和 filename 之间有一个模式:

$(document).ready(function () {
    $(document).on('click', 'commonParentElementHere', function (e) {
        $('#body').load(e.target.id + ".html");
    });
});

此建议使用 .on()，您只需添加一个 commonParentElementHere、这些元素的公共(public)父级的 ID 或类。

另一个选项是对所有可点击的元素使用一个类，然后使用将 id 传递给 html 文件名的代码，例如:

$(document).ready(function () {
    $(document).on('click', '.theCOmmonClass', function () {
        $('#body').load(this.id + ".html");
    });
});