多个AJAX请求function合二为一？

我有几乎相同的Ajax请求调用，但我需要将其扩展为更通用

参见示例代码： http ： //jsfiddle.net/2b8gR/6/

我让它适用于页面A，并希望将它用于页面B，C，D等…但不想为每个新的Ajax请求重写该函数。

大多数代码将保持不变，除了：

• 输入next / prev（page_a_next变为page_b_next）
• 显示页面div（display_page_a_page变为display_page_b_page）
• 显示页码div（display_page_a_number成为display_page_b_number）
• ajax请求url页面名称（url：’page_a.php？page =’+ currentPageA，成为url：’page_b.php？page =’+ currentPageB，）

等等。

如何使Ajax调用和元素更通用，所以我不必多次写这个请求？

注意：我需要能够跟踪它当前显示的每个页面（A，B，C等）。 是的，所有这些都在同一页上

HTML：

 
 Page A   
 
 
 
 
  
 Page B   
 
 
 
  

JS：

 var currentPageA=1; var totalPageA=113; loadPageA(); $("#page_a_next, #page_a_prev").click(function(){ currentPageA = ($(this).attr('id')=='page_a_next') ? currentPageA + 1 : currentPageA - 1; if(currentPageA<=0) { currentPageA=1; $('#page_a_prev').attr('disabled','disabled'); } else if(currentPageA==114) { currentPageA=113; $('#page_a_next').attr('disabled','disabled'); } else { loadPageA(); } }); function loadPageA(){ $('#page_a_next').attr('disabled','disabled'); $('#page_a_prev').attr('disabled','disabled'); $.ajax({ url: 'page_a.php?page='+currentPageA, type: 'POST', error : function (){ alert('Error'); }, success: function (data) { $('#display_page_a_number').html(currentPageA + ' of ' + totalPageA); $('#display_page_a_page').html(data); $('#page_a_next').attr('disabled',''); $('#page_a_prev').attr('disabled',''); } }); } 

Answer 1

这里的关键不仅仅是概括你的JS，还要概括你的HTML。 您还必须将currentPageA和totalPageA变量更改为数组，以便它们可以包含多个值。

看我的演示： http ： //jsfiddle.net/Jaybles/b2uRd/

HTML

  
 Page A   
 
 
 
 
  
 Page B   
 
 
 
  

JS

 var currentPage = {'a':1, 'b':1}; //Should go from A to Z var totalPage = {'a':113, 'b':115}; //Should go from A to Z $(".pageButton").click(function(){ var a = $(this).attr('name').split("_"); var page = a[1]; var dir = a[2]; currentPage[page] = (dir=='next') ? currentPage[page] + 1 : currentPage[page] - 1; if(currentPage[page]<=0) { currentPage[page]=1; $('#page_' + page + '_prev').attr('disabled','disabled'); } else if(currentPage[page] > totalPage[page]) { currentPage[page]=totalPage[page]; $('#page_' + page + '_next').attr('disabled','disabled'); } else { loadPage(page); } }); loadPage('a'); function loadPage(page){ $('#page_' + page + '_next').attr('disabled','disabled'); $('#page_' + page + '_prev').attr('disabled','disabled'); $.ajax({ url: 'page_' + page + '.php?page='+currentPage[page], type: 'POST', error : function (){ document.title='error'; }, success: function (data) { $('#display_page_' + page + '_number').html(currentPage[page]+ ' of ' + totalPage[page]); $('#display_page_' + page + '_page').html(data); $('#page_' + page + '_next').attr('disabled',''); $('#page_' + page + '_prev').attr('disabled',''); } }); } 

Answer 2

也许您可以将您的代码编写为jquery插件，并将currentPageA和totalPageA变量传递到插件中。 您可以在此处找到有关制作jquery插件的信息 。

Answer 3

我会在你的html元素prev ， next ， page ， number添加类。 然后创建一个jQuery插件。

HTML

 
 Page A   
 
 
 

jQuery插件

 (function($) { $.fn.customAjaxPager = function() { var state = { page = "", current = 1, total = 0 }; return this.each(function() { $this = $(this); state.page = $this.attr("data-page"); state.total = $this.attr("data-total"); $(".next", this).click(next); $(".prev", this).click(prev); }); function next() { state.current++; if (state.current >= state.total) { state.current = state.total; $(".next", this).attr("disabled", "disabled"); return; } load(); }; function prev() { state.current--; if (state.current <= 0) { state.current = 0; $(".prev", this).attr("disabled", "disabled"); return; } load(); }; function load() { $('.next,.prev').attr('disabled','disabled'); $.ajax({ url: 'page_"+ state.page +".php?page='+ state.current, type: 'POST', error : function (){ alert('Error'); }, success: function (data) { $('.number', this).html(state.current + ' of ' + state.total); $('.page', this).html(data); $('.next,.prev', this).removeAttr('disabled',''); } }); }; }; })(jQuery); 

用法

 $("div[data-page='a']").customAjaxPager();