Question

我有几乎相同的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请求网址页面名称（网址：'page_a.php？page ='+ currentPageA，成为网址：'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

我会为您的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();

Answer 2

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

Answer 3

这里的关键不仅仅是概括你的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','');
        }
    });
}

多个AJAX请求功能合二为一？

3 个答案: