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，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函数。通过附加到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);      
            });
        }
    });

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

3 个答案: