PHP AJAX排序数组无需重新加载页面答案

【问题标题】：PHP AJAX sort array without reloading pagePHP AJAX排序数组无需重新加载页面
【发布时间】：2012-06-12 19:56:26
【问题描述】：

我有以下代码对 XML 文件运行查询并返回结果。然后我使用 usort 对其进行排序。（我的排序功能在单独的页面 sort.php 上）。我现在已经注释掉了 usort，但是 usort 函数可以正常工作。

$xml = simplexml_load_file($url);

//RUN QUERY ON XML
$xQuery = $xml->xpath($query);

//DISPLAY RESULTS OF QUERY

$i = 0;
//usort($xQuery, 'sortMake');
    for ($f = 0; $f <= 9; $f++) {               
        ?>
            <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
            MAKE:  <?php echo $xQuery[$i]->Make;?><br />
            Model: <?php echo $xQuery[$i]->Model;?><br />
            $i++;


    <?php } ?>

所以上面的代码会显示所有未排序的内容。我想在循环之前有一个排序链接，单击该链接会对数组进行排序并显示它，而无需重新加载整个页面。我知道它可能与 AJAX 有关，但我发现的所有 AJAX 资源都是使用 MySQL 的函数的示例。我没有使用 MySQL。

任何帮助将不胜感激。谢谢。

【问题讨论】：

既然你用jQuery标记了你的问题，你能在客户端添加排序吗？您的数据是否会放入表格或列表中？
我标记了 jQuery，因为据我了解它的 AJAX 和 jQuery 用于在页面上完成事件而无需重新加载页面。如果它错了，我会删除标签。数据位于 PHP 数组中，然后显示在 html 表中。我没有发布所有 HTML 以保持帖子简短。

标签： php jquery ajax arrays sorting

【解决方案1】：

查看jQuery's .get() function。这至少应该让你指出正确的方向。 jQuery 是一个 Javascript 库，绝对可以用于您的目的。单独的 Javascript 也可以完成这项任务，但是 jQuery 的目标是通过最小化你必须做的编码量来简化你的生活。您必须下载或引用 <head> 标记中的 jQuery 库。如果您真的想开始使用 jQuery，那么您绝对应该阅读选择器以及如何使用它们。

个人我喜欢 jQuery 并且使用过其他几个库。我发现 jQuery 非常适合初学者，而且在线文档也很棒。它拥有庞大的用户群，可以为您解答所有问题。

基本上，您需要将显示的数据包装在 jQuery 能够找到的标签中，即：

<a href='#' id='link'>Sort Data</a>
<div id='xmlData'>...DATA...</div>`

然后有你的脚本：

$("#link").click(function(){
    $.get('xmldata.php',function(d){
        $('#xmlData').html(d);
    });
});

然后有一个名为xmldata.php 的脚本，其内容为：

$xml = simplexml_load_file($url);

//RUN QUERY ON XML
$xQuery = $xml->xpath($query);

//DISPLAY RESULTS OF QUERY

$i = 0;
usort($xQuery, 'sortMake');
for ($f = 0; $f <= 9; $f++) {               
    ?>
        <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
        MAKE:  <?php echo $xQuery[$i]->Make;?><br />
        Model: <?php echo $xQuery[$i]->Model;?><br />
        $i++;
<?php } ?>

【讨论】：

谢谢，我会试试这个，让你知道它是怎么回事。
另外一个问题，我在“sort.php”中有多种排序方法。所以'sortMake'不会是我唯一使用的。我需要多个类似于 xmldata.php 的页面吗？或者有没有办法从链接中获取 xmldata.php 中的值？
$("#link").click(function(){ $.get('xmldata.php?sort=sortMake',function(d){ $('#xmlData').html (d);});});我可以在 xmldata.php 上 $_GET['sort'] 吗？
$.get('xmldata.php',{sort:'sortMake'},function(){/*function stuff*/}); 是的，你可以。
是的，你应该完全使用 jQuery。我听说 Jon Skeet 在 6 到 8 周内就发明了。

【解决方案2】：

您可以在页面上对其进行排序，无需 AJAX 或 PHP 排序。您需要稍微修改您的 HTML。将结果放在具有 id 的父元素中。将每个结果放在一个带有类的 div 中。将要排序的数据放在一个类中：

<div id="carList">
    <div class="car">
        <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
        MAKE:  <span class="make"><?php echo $xQuery[$i]->Make;?></span><br />
        Model: <span class="model"><?php echo $xQuery[$i]->Model;?></span><br />
        $i++;
    </div>
    ...
</div>

要对元素进行排序，首先将它们放入Array：

var listEl = $("#carList");
var cars = listEl.children(".car").get();

然后在您的Array 上致电.sort()。您将创建一个自定义比较函数以传递给.sort()：

cars.sort(function (a, b) {
    var aMake = $(a).find(".make").text();
    var bMake = $(b).find(".make").text();
    return a - b;
});

现在，只需将元素添加回父元素：

listEl.append(cars);

演示： http://jsfiddle.net/gilly3/ZNmEh/

【讨论】：

我喜欢它。非常简单，可以非常有效地完成工作。