php - 使用 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 中的数据进行操作。你可以用你的复选框做类似的事情。