У меня почти такой же запрос Ajax Request, но мне нужно расширить его, чтобы он был более общим
См. Пример Код: http://jsfiddle.net/2b8gR/6/
Я использую его для страницы A и хочу использовать его для страниц B, C, D и т. Д., Но не хочу переписывать функцию для каждого нового запроса Ajax.
Большая часть кода останется неизменной, за исключением:
и так далее.
Как сделать вызов Ajax и элементы более универсальными, поэтому мне не нужно писать этот запрос несколько раз?
ПРИМЕЧАНИЕ. Мне нужно иметь возможность отслеживать каждую страницу (A, B, C и т. Д.), Которую она отображает. И да, все они находятся на одной странице
HTML:
<!-- Page A --> <div> <span>Page A</span> <input id="page_a_next" name="page_a_next" type="button" value="Next" data-inline="true" /> <input id="page_a_prev" name="page_a_prev" type="button" value="Previous" data-inline="true" /> </div> <div id="display_page_a_page" name="display_page_a_page"> </div> <div id="display_page_a_number" name="display_page_a_number"> </div> <!-- Page B --> <div> <span>Page B</span> <input id="page_b_next" name="page_b_next" type="button" value="Next" data-inline="true" /> <input id="page_b_prev" name="page_b_prev" type="button" value="Previous" data-inline="true" /> </div> <div id="display_page_b_page" name="display_page_b_page"> </div> <div id="display_page_b_number" name="display_page_b_number"> </div> 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',''); } }); }
Ключевым моментом здесь является не просто обобщение вашего JS, но и обобщение вашего HTML. Вы также должны изменить переменные currentPageA и totalPageA на массив, чтобы они могли содержать более одного значения.
См. Мою демонстрацию: http://jsfiddle.net/Jaybles/b2uRd/
HTML
<!-- Page A --> <div> <span>Page A</span> <input class='pageButton' id="page_a_next" name="page_a_next" type="button" value="Next" data-inline="true"/> <input class='pageButton' id="page_a_prev" name="page_a_prev" type="button" value="Previous" data-inline="true" /> </div> <div id="display_page_a_page" name="display_page_a_page"> </div> <div id="display_page_a_number" name="display_page_a_number"> </div> <!-- Page B --> <div> <span>Page B</span> <input class='pageButton' id="page_b_next" name="page_b_next" type="button" value="Next" data-inline="true" /> <input class='pageButton' id="page_b_prev" name="page_b_prev" type="button" value="Previous" data-inline="true" /> </div> <div id="display_page_b_page" name="display_page_b_page"> </div> <div id="display_page_b_number" name="display_page_b_number"> </div>
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',''); } }); }
Возможно, вы могли бы написать свой код как плагин jquery и просто передать переменные currentPageA и totalPageA в плагин. Здесь вы можете найти информацию о создании плагина jquery.
Я бы добавил классы к вашим html-элементам prev , next , page , number . А затем создайте плагин jQuery.
HTML
<div data-page="a" data-total="113"> <span>Page A</span> <input id="page_a_next" name="page_a_next" type="button" value="Next" data-inline="true" class="next" /> <input id="page_a_prev" name="page_a_prev" type="button" value="Previous" data-inline="true" class="prev" /> </div> <div id="display_page_a_page" name="display_page_a_page" class="page"></div> <div id="display_page_a_number" name="display_page_a_number" class="number"></div>
Плагин 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();