Question

我已经创建了一个AJAX请求，它会动态加载我的页面信息。我正在尝试为我的所有页面执行此操作，同时保持我的代码DRY。所以我试图用它创建一个函数，但无法弄清楚它为什么不起作用。

关于正在运行的页面AJAX请求-AJAX About.html

        $('#about-button').on('click', function() {
          $('body section').hide(),
          $(this).closest('nav').find('.active-page').removeClass('active-page'),
          $(this).closest('nav').find('#about-button').addClass('active-page')

          $.ajax('about.html', {
            success: function(response) {
              $('.about-page').html(response).slideDown()
            },
            error: function(request, errorType, errorMessage) {
              $('body').html("<h5> 'Error: ' + errorType + ' with message ' + errorMessage </h5>")
            },
            timeout: 3000
          }); 
        });

用于所有页面的自定义功能...

        function pageCall (ajaxButton, ajaxUrl, ajaxPage) {
        ajaxButton.on('click', function() {
        $('body section').hide(),
        $(this).closest('nav').find('.active-page').removeClass('active-page'),

            $(this).closest('nav').find(ajaxButton).addClass('active-page')

        $.ajax(ajaxUrl, {
          success: function(response) {
            ajaxPage.html(response).slideDown()
          },
          error: function(request, errorType, errorMessage) {
            $('body').html("<h5> 'Error: ' + errorType + ' with message ' + errorMessage </h5>")
          },
          timeout: 3000
          }); 
        });
      };

我试图调用该函数的几种不同的方式...没有一个导致在控制台中记录任何错误，但是没有加载about页面内容......

尝试1：

        pageCall ('#about-button', 'about.html','.about-page');

尝试2：

     var aboutAjax = pageCall ('#about-button', 'about.html', '.about-page');

尝试3：

      function pageCall (ajaxButton, ajaxUrl, ajaxPage) {
          var ajaxButton = '#about-button'
          var ajaxUrl = 'about.html'
          var ajaxPage = '.about-page'
      }

     aboutAjax;

非常感谢任何帮助！

Answer 1

我明白了，

    pageCall ($('#about-button'),'about.html',$('.about-page'));

'about.html'应该是一个字符串。

感谢您的帮助！

为多个页面无法正常工作定义和调用自定义AJAX函数

1 个答案: