使用jquery ajax和php实现过滤内容

Question

我使用jQuery为一个作业门户实现了多个复选框过滤，其中，每次选中复选框时，我都会调用一个函数，该函数包含一个ajax调用，该调用将发送带有选中值的请求，我将查询数据库并返回结果。

但我遇到的一位开发人员告诉我，你不应该连续地访问数据库进行筛选，应该在客户端进行
他还建议使用AngularJS或Knockout（js），因为它们处理内容，而jQuery处理DOM元素。

但是，如果必须在客户端进行，则必须在第一次访问页面时同时加载所有数据，这反过来会减慢页面的速度
我不能在每个元素上使用类，并根据复选框ID或类似的值来显示/隐藏它们，因为有很多复选框，我认为处理起来会很忙。

如何以良好的性能达到理想的结果
我是jQuery的新手，所以如果我在任何地方出错，请耐心等待。

以下是我实际完成的示例方式：

---

HTML:

<input type="checkbox" name="location[]" value="Bangalore" onclick="loadresult()">Bangalore

JS:

function loadresult() {
    location array value accessed and passed to ajaxcall
    //ajax call to processresult.php
    Displaying the DB returned Data
}

PHP（processresult.PHP）：

<?php
    //dbconnection + querying db and returning result
?>

Answer 1

存在显著差异。Angular是一个框架，jQuery是一个库。使用jQuery，修改DOM元素处理事件和做一些更酷的事情要简单得多。但你自己定义如何处理数据。您可以轻松地将数据移动到Js对象或对象数组中，并将这些数据呈现到DOM树中
例如：

//let's presume that you are searching something
var someUsers = [{id: 1,name:'User 1'},{id: 2,name:'User 2'},{id: 1,name:'User 3'}];
var usersTemplate = _.template("<h1>User name: <%= user.name %></h1>");
var $container = $('#someRenderContainer');
someInputFeild.on('keypress', function(){
   var searchText = someInputFeild.text();
   var foundUsers = someUsers.filter(function(item, index){
       item.name.indexOf(searchText) !== -1
   });
   render($container,foundUsers);
})
function render($container,users){
   users.forEach(function(item){
      $container.append(usersTemplate(item));
   })
}

这里有一个简单的例子，您可以看到您使用内存中的数据而不是DOM中的数据进行操作。你可以用你的复选框做类似的事情。

Answer 2

我只需要在开始时发出一个ajax请求，用数据填充页面，用类名标记每一行

jQuery.each(d, function(i,data) {
    $("table.content").append("<tr class=""+data.city+""><td>" + data.tag + "</td><td>" + data.city + "</td><td>" + data.num + "</td><td>" + data.state + "</td></tr>");
});

并使用复选框使用jQueryhide（）、show（）方法隐藏和显示标记的行。行可以有多个类，这意味着由多列过滤，但逻辑会变得更加复杂。参见示例http://jsfiddle.net/elshnkhll/czdongkp/

Answer 3

我会使用缓存技术来提高性能
我们无法在一个页面上加载我们的完整记录。这将减慢主页面的加载速度
但是，我们可以将加载的数据保存在一个变量中，该变量具有不同过滤器和页码的一些组合键。
例如，如果我们在没有过滤器的索引页中加载数据，我的键将是索引，我的变量将像var cachevar = {"index":{1:"<my response>"}}，这里"1"是页码

如果数据使用的是filter，那么我的变量索引键将是由'-'分解的filter id的组合。例如var cachevar = {"index":{1:"<my response>"}, "index-2-5-3":{1:"my response"}}

如果用户请求一个页面，我只需要检查该页面是否在缓存中可用，如果它在缓存变量中可用，然后显示它，否则从服务器请求它。