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

Question

I have pretty much the same Ajax Request call but I need to expand it to be more generic

See example Code: http://jsfiddle.net/2b8gR/6/

I have it working for Page A and want to use it for Page B, C, D, etc... but don't want to rewrite the function for every new Ajax request.

Most of the code will remain the same except:

• input next/prev (page_a_next becomes page_b_next)
• display page div (display_page_a_page becomes display_page_b_page)
• display page number div (display_page_a_number becomes display_page_b_number)
• ajax request url page name (url: 'page_a.php?page='+currentPageA, becomes url: 'page_b.php?page='+currentPageB,)

and so forth.

How do I make the Ajax call and elements more generic so I don't have to write this request multiple times?

NOTE: I need to be able to keep track of each page (A, B, C, etc...) it's currently displaying. And yes all of these are on the same page

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

The key here is not just to generalize your JS, but to also generalize your HTML. You must also change your currentPageA and totalPageA variables to array so they can hold more than one value.

See my Demo: 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','');
        }
    });
}