为多个页面定义和调用自定义 AJAX 函数不起作用

Posted 2023-04-14

【中文标题】为多个页面定义和调用自定义 AJAX 函数不起作用

【英文标题】：defining and calling custom AJAX function for multiple pages not working

【发布时间】：2014-06-05 17:45:06

【问题描述】：

我创建了一个 AJAX 请求，它将动态加载我的关于页面信息。我正在尝试为我的所有页面执行此操作，同时保持我的代码干燥。所以我试图用它创建一个函数，但不知道为什么它不起作用。

关于正在工作的页面 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
          ); 
        );
      ;

我尝试调用函数的几种不同方式...都不会导致在控制台中记录任何错误，但未加载关于页面内容...

尝试 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;

非常感谢任何帮助！

【问题讨论】：

在哪里定义和调用函数？如果它是在闭包中定义的，您将无法在该闭包之外访问。

首先我看到的是 pageCall ('#about-button', 'about.html','.about-page');您正在传递字符串，但希望将事件处理程序附加到它： ajaxButton.on('click', function()

这里有同样的问题：ajaxPage.html(response).slideDown()。 ajaxPage 在这里也可能是一个字符串。

于是我把pageCall改成了--pageCall($('#about-button'), $('about.html'),$('.about-page'));现在，它运行函数的第一部分，清除前一页数据（正文部分），但它不加载任何关于页面信息。我在定义它之后运行这个函数调用来回答亚当的问题。

【参考方案1】：

我明白了，

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

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

感谢你们的帮助！