Несколько функций AJAX-запросов объединены в одну?

Question

У меня почти такой же вызов Ajax Request, но мне нужно расширить его, чтобы он был более общим

См. Пример кода: http://jsfiddle.net/2b8gR/6/

У меня она работает для страницы A и я хочу использовать ее для страниц B, C, D и т. Д., Но не хочу переписывать функцию для каждого нового запроса Ajax.

Большая часть кода останется прежней, кроме:

• введите следующий / предыдущий (page_a_next становится page_b_next)
• отображение страницы div (display_page_a_page становится display_page_b_page)
• показать номер страницы div (display_page_a_number становится display_page_b_number)
• имя страницы URL запроса ajax (url: 'page_a.php? Page =' + currentPageA, становится URL: 'page_b.php? Page =' + currentPageB,)

и пр.

Как сделать вызов 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','');
        }
    });
}

Answer 1

Может быть, вы могли бы написать свой код как плагин jquery и просто передать переменные currentPageA и totalPageA в плагин. Вы можете найти информацию о создании плагина jquery здесь .

Answer 2

Ключевым моментом здесь является не только обобщение вашего 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','');
        }
    });
}

Answer 3

Я бы добавил классы к вашим 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();