javascript - 通过ajax获取html文件，并在目标html中使用data参数

Question

 var testAjax = {
  init: function(){
    $('#query').on('click', '#starter', this.loadAjax);
  },

  loadAjax: function (){
    $.ajax('ajax/workOne.html', {
      success: function(response){
        $('#answer').children('h3').html(response);
      },
      data: {
        'confTot': 5678
      }
    });
  }
};

testAjax.init();

所以我有这个重构的ajax代码，并且在./ajax/文件夹中有一个名为'workOne.html?confTot=5678'的文件，这样我可以用这个ajax代码将其拉入。但是，当我在 Chrome DevTools 中运行代码时，ajax 调用无法 GET html 文件 'ajax/workOne.html?confTot=5678' 即使我确实有该文件位于 ajax 文件夹中，具有适当且相同的名称。我如何才能访问我感兴趣的特定 html。提前感谢您的专业知识!

Answer 1

大多数 Web 服务器希望将查询参数(“？”之后的所有内容)视为由 Web 应用程序使用的动态信息。对于静态资源(如 html 文件)，它们只是忽略问号后面的所有内容。

换句话说，您的网络服务器可能正在寻找提供名为 workOne.html 的文件，但找不到它。因为您处理的是静态资源而不是动态资源，所以我建议您忘记尝试使用 jQuery 动态添加数据，而只使用包含数字的 URL 路径和文件结构。例如，将您的 html 放入 ./ajax/workOne/5678.html 并说:

  loadAjax: function (){
    $.ajax('ajax/workOne/5678.html', {
      success: function(response){
        $('#answer').children('h3').html(response);
      }
    });
  }