多AJAX请求的功能合并成一个？ [英] Multiple AJAX requests functions combined into one?

查看：2055
本文介绍了多AJAX请求的功能合并成一个？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有pretty的大致相同的Ajax请求调用，但我需要将它扩大到更为通用

见例如code： http://jsfiddle.net/2b8gR/6/

我有工作了网页A，并希望将其用于网页B，C，D，等等......但不希望重写功能，为每一个新的Ajax请求。

在大多数情况下code将保持不变，除非：

  • 在输入下一个/ preV（page_a_next成为page_b_next）
  • 在显示页面的div（display_page_a_page成为display_page_b_page）
  • 在显示页面号码格（display_page_a_number成为display_page_b_number）
  • 在Ajax请求的URL页面的域名（网址：'？page_a.php页='+ currentPageA，变成网址：'？page_b.php页='+ currentPageB，）

和等等。

如何让我的Ajax调用和元素更通用的，所以我没有写申请多次？

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

HTML：

 ＆LT;！ - 网页A  - ＆GT;
＆LT; D​​IV＆GT;
    ＆LT;跨度＆gt;页面A＆LT; / SPAN＆GT;
    ＆LT;输入ID =page_a_nextNAME =page_a_next类型=按钮值=下一步数据内嵌=真/＆GT;
    ＆LT;输入ID =page_a_ preVNAME =page_a_ preV类型=按钮值=previous数据内嵌=真/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_a_pageNAME =display_page_a_page＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_a_numberNAME =display_page_a_number＆GT;
＆LT; / DIV＆GT;

＆LT;！ - 网页B  - ＆GT;
＆LT; D​​IV＆GT;
    ＆LT;跨度＆gt;页面B＆LT; / SPAN＆GT;
    ＆LT;输入ID =page_b_nextNAME =page_b_next类型=按钮值=下一步数据内嵌=真/＆GT;
    ＆LT;输入ID =page_b_ preVNAME =page_b_ preV类型=按钮值=previous数据内嵌=真/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_b_pageNAME =display_page_b_page＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_b_numberNAME =display_page_b_number＆GT;
＆LT; / DIV＆GT;

记者：

  VAR currentPageA = 1;
VAR totalPageA = 113;
loadPageA（）;

$（＃page_a_next，＃page_a_ preV）。点击（函数（）{
    currentPageA =（$（本）.attr（'身份证'）=='page_a_next）？ currentPageA + 1：currentPageA  -  1;

    如果（currentPageA＆所述; = 0）{
        currentPageA = 1;
        $（'＃page_a_ preV）ATTR（禁用，禁用）。
    }否则，如果（currentPageA == 114）{
        currentPageA = 113;
        $（'＃page_a_next）ATTR（禁用，禁用）。
    } 其他 {
        loadPageA（）;
    }
}）;

功能loadPageA（）{
    $（'＃page_a_next）ATTR（禁用，禁用）。
    $（'＃page_a_ preV）ATTR（禁用，禁用）。

    $阿贾克斯（{
        网址：'？page_a.php页='+ currentPageA，
        键入：POST，
        错误：函数（）{警报（错误）; }，
        成功：功能（数据）{
            $（'＃display_page_a_number）HTML（currentPageA +'的'+ totalPageA）;
            $（'＃display_page_a_page'）的HTML（数据）。
            $（'＃page_a_next）ATTR（'残疾'，''）。
            $（'＃page_a_ preV）ATTR（'残疾'，''）。
        }
    }）;
}

解决方案

这里的关键不只是概括你的JS，而且还推广你的HTML。您还必须改变你的currentPageA和totalPageA变量，数组，以便他们可以持有多单的价值。

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

HTML 

 ＆LT;！ - 网页A  - ＆GT;
＆LT; D​​IV＆GT;
    ＆LT;跨度＆gt;页面A＆LT; / SPAN＆GT;
    ＆LT;输入级='pageButton'ID =page_a_nextNAME =page_a_next类型=按钮值=下一步数据内嵌=真/＆GT;
    ＆LT;输入级='pageButton'ID =page_a_ preVNAME =page_a_ preV类型=按钮值=previous数据内嵌=真/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_a_pageNAME =display_page_a_page＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_a_numberNAME =display_page_a_number＆GT;
＆LT; / DIV＆GT;

＆LT;！ - 网页B  - ＆GT;
＆LT; D​​IV＆GT;
    ＆LT;跨度＆gt;页面B＆LT; / SPAN＆GT;
    ＆LT;输入级='pageButton'ID =page_b_nextNAME =page_b_next类型=按钮值=下一步数据内嵌=真/＆GT;
    ＆LT;输入级='pageButton'ID =page_b_ preVNAME =page_b_ preV类型=按钮值=previous数据内嵌=真/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_b_pageNAME =display_page_b_page＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =display_page_b_numberNAME =display_page_b_number＆GT;
＆LT; / DIV＆GT;

JS 

  VAR当前页= {'一'：1，'B'：1}; //应该从一个去到Z
VAR共页= {'一'113，'B'：115}; //应该从一个去到Z

$（pageButton）。点击（函数（）{
    VAR一个= $（本）.attr（名称）分裂（_）。
    变种页=一[1];
    变种DIR =一个[2];
    当前页[页码] =（DIR =='下一步'）？当前页[页码] + 1：当前页[首页]  -  1;

    如果（当前页[页码]＆LT; = 0）{
        当前页[页码] = 1;
        $（'＃PAGE_+网页+'_ preV）ATTR（禁用，禁用）。
    }否则如果（当前页[页码]＆GT;共页[页码]）{
        当前页[页码] =共页[页码]
        $（'＃PAGE_+网页+_next）ATTR（禁用，禁用）。
    } 其他 {
        loadPage（页）;
    }
}）;

loadPage（'一个'）;

功能loadPage（页）{
    $（'＃PAGE_+网页+_next）ATTR（禁用，禁用）。
    $（'＃PAGE_+网页+'_ preV）ATTR（禁用，禁用）。

    $阿贾克斯（{
        网址：PAGE_+网页+'PHP页面='+当前页[页码]
        键入：POST，
        错误：函数（）{document.title时='错误'; }，
        成功：功能（数据）{
            $（'＃display_page_+网页+_number）HTML（当前页[页码] +'的'+共页[页码]）。
            $（'＃display_page_+网页+_page）HTML（数据）。
            $（'＃PAGE_+网页+_next）ATTR（'残疾'，''）。
            $（'＃PAGE_+网页+'_ preV）ATTR（'残疾'，''）。
        }
    }）;
}

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','');
        }
    });
}

解决方案

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','');
        }
    });
}

这篇关于多AJAX请求的功能合并成一个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆