Question

我正在尝试合并两个使用jQuery的ajax函数。两者都完美地完成了自己的工作，但是我有一段时间将这两者结合起来，而且当涉及到Ajax时我很绿。我无法弄清楚出了什么问题。

我知道这会问很多人，但我不知道还能做什么。我非常感谢任何帮助，也许是对我想要为这段代码添加更多功能所需要做的解释，所以我不必一直困扰你们。

这是一个图片库。这两个部分是一个组合框，用于选择每页显示的图像数量，另一个是用于浏览页面的分页。我觉得它与jQuery Ajax data: {page:page, imgs: value}有关，但这可能只是问题的一部分。

HTML：

<div id="loading"></div>
<div id="gallery_container">
    <ul class="new_arrivals_gallery"></ul>
    <div class="pagination"></div>
    <form>
        <label>Images Number:</label>
        <select id="imgNum" name="imgNum">
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>      
        </select>
    </form>
</div>

JavaScript（jQuery）：

function loading_show(){
    $('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
    $('#loading').fadeOut('fast');
}                
function gallery_show(){
    $('#gallery_container').fadeIn('slow');
}
function gallery_hide(){
    $('#gallery_container').fadeOut(10);
}

function loadData(page){
    loading_show();
    gallery_hide();                    
    $.ajax
    ({
        type: "GET",
        url: "new_arrivals_data.php",
        data: {page:page, imgs: value},
        success: function(msg)
        {
            $("#gallery_container").ajaxComplete(function(event, request, settings)
            {
                gallery_show();
                loading_hide();
                $("#gallery_container").html(msg);
            });
        }
    });
}
loadData(1);  // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
    var page = $(this).attr('p');
    loadData(page);
});           
$('#go_btn').live('click',function(){
    var page = parseInt($('.goto').val());
    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){
        loadData(page);
    }else{
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
    //The combo box
    var sel = $(this);
    //Selected value
    var value = sel.val();
    loadData(page);
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
    .prop("selected","selected")
    .change();

PHP：

<?php
if($_GET['page'])
{
$page = 0;
 if(isset($_GET['page'])){
    $page = (int) $_GET['page'];
 }
$cur_page = $page;
$page -= 1;
if((int) $_GET['imgs'] > 0){ 
    $per_page = (int) $_GET['imgs']; 
} else { 
    $per_page = 12; 
}
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;

include"db.php";

$query_pag_data = "SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT $start, $per_page";

$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());

echo "<ul class='new_arrivals_gallery'>";
while($row = mysql_fetch_assoc($result_pag_data)) { 
    echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
  }
echo "</ul>";   


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM images";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}

非常感谢你花时间看这个。我知道这很多，但即使有人告诉我需要做什么，然后我弄清楚如何去做，我将非常感激。

*在我尝试将它们组合之前，我愿意包含每个部分的代码，如果这样做会有所帮助。

原始搜索代码： 这是两组原始代码。目标是将它们组合起来，换句话说，将代码＃2添加到代码＃1。

HTML＆amp; jQuery＃1：

<body>
    <div id="loading"></div>
    <div id="gallery_container">
        <ul class="new_arrivals_gallery"></ul>
        <div class="pagination"></div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){
            function loading_show(){
                $('#loading').html("<img src='loading.gif'/>").fadeIn('fast');
            }
            function loading_hide(){
                $('#loading').fadeOut('fast');
            }                
            function gallery_show(){
                $('#gallery_container').fadeIn('slow');
            }
            function gallery_hide(){
                $('#gallery_container').fadeOut(10);
            }

            function loadData(page){
                loading_show();
                gallery_hide();                    
                $.ajax
                ({
                    type: "GET",
                    url: "new_arrivals_data.php",
                    data: "page="+page,
                    success: function(msg)
                    {
                        $("#gallery_container").ajaxComplete(function(event, request, settings)
                        {
                            gallery_show();
                            loading_hide();
                            $("#gallery_container").html(msg);
                        });
                    }
                });
            }
            loadData(1);  // For first time page load default results
            $('#gallery_container .pagination li.active').live('click',function(){
                var page = $(this).attr('p');
                loadData(page);

            });           
            $('#go_btn').live('click',function(){
                var page = parseInt($('.goto').val());
                var no_of_pages = parseInt($('.total').attr('a'));
                if(page != 0 && page <= no_of_pages){
                    loadData(page);
                }else{
                    alert('Enter a PAGE between 1 and '+no_of_pages);
                    $('.goto').val("").focus();
                    return false;
                }

            });
        });
    </script>

</body>

PHP＃1：

<?php
if($_GET['page'])
{
$page = $_GET['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";


$query_pag_data = "SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT $start, $per_page";

$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());

echo "<ul class='new_arrivals_gallery'>";
while($row = mysql_fetch_assoc($result_pag_data)) { 
    echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
  }
echo "</ul>";   


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM images";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}

HTML＆amp; jQuery＃2：

<body>


<form>
    <label>Images Number:</label>
    <select id="imgNum" name="imgNum">
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>      
    </select>
</form>

<div id="imgTray"></div>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script> 
<script>

//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
    //The combo box
    var sel = $(this);
    //Selected value
    var value = sel.val();

    //Feth the images
    $.get("get_images.php",{imgs: value}, function(data){
        //Add images to the document
        $("#imgTray").html(data);
    });
})

//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
    .prop("selected","selected")
    .change();

</script>
</body>

PHP＃2：

<?php
    if((int) $_GET['imgs'] > 0){ 
        $limit = (int) $_GET['imgs']; 
    } else { 
        $limit = 12; 
    }

     $curPage = 0;
     if(isset($_GET['page'])){
        $curPage = (int) $_GET['page'];
     }

    $mysql_link = mysql_connect("localhost", "root", "root");   
    mysql_select_db("new_arrivals_imgs") or die("Could not select database");

    $query = mysql_query("SELECT `imgURL`,`imgTitle` FROM `images` ".
    "ORDER BY `imgDate` DESC LIMIT " . $limit * $curPage . ", $limit") or die(mysql_error());

    if(!$query) {
        echo "Cannot retrieve information from database.";
    } else { 
    while($row = mysql_fetch_assoc($query)) { 
        echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
      }
    }

?>

以为我应该提一下：当我将data: {page:page, imgs: value}更改回代码＃1中的内容时：data: "page="+page图像显示，并且分页有效。唉，组合框不可见。有什么想法？

Answer 1

我不认为以下代码：

$("#gallery_container").ajaxComplete(function(event, request, settings)
            {
                gallery_show();
                loading_hide();
                $("#gallery_container").html(msg);
            });

应该是你的ajax调用的成功函数..

API声明

每当Ajax请求完成时，jQuery就会触发ajaxComplete事件。已经使用.ajaxComplete（）方法注册的任何和所有处理程序都会在此时执行。

因此，在您的情况下，任何进一步的ajax请求都应该触发ajaxComplete事件并调用相同的回调函数。

希望有意义..我自己没有使用过ajaxComplete API，这是我的理解

Answer 2

您的success回调就是这样：

success: function(msg) {
    gallery_show();
    loading_hide();
    $("#gallery_container").html(msg);
}

这样，当您从服务器成功获取HTML（在msg中）时，您将显示库，隐藏加载器动画，并将msg HTML填充到库中。< / p>

ajaxComplete function注册“AJAX已完成”处理程序：

每当Ajax请求完成时，jQuery就会触发ajaxComplete事件。已经使用.ajaxComplete()方法注册的任何和所有处理程序都会在此时执行。

但你没有在#gallery_container上做任何AJAX，你正在做的事情，但它不知道这些事情来自AJAX行动。结果是您的成功处理程序不会执行用户可以看到的任何内容。

error处理程序也可能是一个很好的补充，然后你可以将“隐藏加载器动画”移动到complete处理程序：

success: function(msg) {
    gallery_show();
    $("#gallery_container").html(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
    // Tell the human that something broke.
},
complete: function() {
    // This is always called regardless of success or failure.
    loading_hide();
}

complete handler是：

请求完成时要调用的函数（执行成功和错误回调之后）。

所以这是一个放置任何你想要发生的清理的好地方。

结合jQuery Ajax代码不起作用

2 个答案: