使用 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>");
});

并使用 jQuery hide()、show() 方法使用复选框来隐藏和显示标记的行。 行可以有多个类，意思是由多个列过滤，但逻辑会变得更加复杂。 见例子http://jsfiddle.net/elshnkhll/czdongkp/

Answer 3

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

如果数据正在使用过滤器，那么我的可变索引键将是由“-”分隔的过滤器 ID 的组合。 例如var cachevar = {"index":{1:"<my response>"}, "index-2-5-3":{1:"my response"}}

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