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

Question

我正在尝试使用Ajax Loads（主要是通过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，ID或一类。

另一个选项是在应单击的所有元素上使用类，然后使用将ID传递给HTML文件名的代码，例如：

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

Answer 2

我会说给您要单击类的所有元素，然后说ajax。

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

Answer 3

假设id匹配文件名，可以简化脚本为：

$(document).ready(function() {
  $('#dog,#cat,#bird,#lizard').click(function () {
      var fileName = this.id + ".html";
      $('#body').load(fileName);      
  });
});

此脚本只需在单个选择器中指定每个id，该选择器将每个id与逗号分开。这将调用要为每个元素触发的click函数。随着单击事件附加匿名函数，获得并加入每个元素的id以创建文件名，然后传递给load函数。

如果id不总是匹配element，则可以使用以下方法。

var mappings = [
   {id: "fileName1", file:"file.html"},
   {id: "fileName2", file:"file2.html"}
];
    $(document).ready(function() {
        for(var i = 0; i < mappings; i++){
            createMapping(mappings[i]);
        }
        function createMapping(mapping){
            $("#" + mapping.id).click(function(){
               $('#body').load(mapping.file);      
            });
        }
    });