单击使用Ajax导航时更改内容

Question

我想更改我的列表内容取决于用户在我的导航中“点击”了什么。我是Ajax的新手，并且不太了解它。

我不希望网站“重新加载”所以只有PHP不是这里的灵魂。

所以，如果有人能对我好，并说出这项工作如何并试图解决这个问题，我会很高兴作为一条鱼！

这就是它现在看起来的样子，我已经为你编辑了这张图片以便掌握它。

亲切的问候/有问题的男人..

Answer 1

假设我们想要使用JQuery（http://api.jquery.com/）ajax处理程序。

您需要做的是创建一个将返回新列表的php页面，您可以通过使用过滤器来显示正确的信息。然后，您要将该列表推送到容器中。

所以使用jquery，首先将click事件绑定到链接，然后运行类似这样的

$.get("[url]?filter=some filter", function(data){
     $([the div box id]).html(data ) 
});

其他选项包括将过滤后的列表作为json返回，但为了简单起见，我们只需坚持返回html。

Answer 2

默认情况下，您似乎已将所有类别加载到列表中，对吗？如果是这样，那么使用AJAX来检索已经提供的内容就没有必要（而且这是不好的做法）。这是你想要做的。

在PHP中，您需要为这些项添加一个唯一的类（最好使用类别名称的某些变体）。如果每个项目有多个类别，请为其所属的每个类别附加一个唯一的类。

在客户端，使用jQuery仅显示所需的项目。

jQuery( itemSelector ).not( desiredClass ).hide(); jQuery( desiredClass ).show();

以上内容将隐藏所有不在所需课程中的Feed项目，并且为了防止您想要显示的一些项目被隐藏，我们也会在所需的课程上调用show。

您可以在onClick左侧的按钮上实现此功能。