javascript - 如何使用 URL 参数过滤表中的结果

Question

我试图通过让用户通过下拉列表和文本框选择多个选项来过滤 HTML 页面上的结果。

一个示例是过滤用户 10 英里半径内的结果。我的所有机制都在工作，但我不确定我做得是否正确。

所以我有类似的东西: http://slickdeals.net/deals/tech/

过滤选项位于页面左侧，人们可以按价格范围、评级等进行过滤。所以我的第一个问题是:使用 javascript 如何开始将过滤器选项添加到 URL 参数？

现在我正在做这样的事情:

$('#FilterLocation').on('change', function () {
    window.location.replace("?lat=" + place.geometry.location.lat() + "&lng=" + place.geometry.location.lng());
});
$('#FilterPrice').on('change', function () {
    window.location.replace("?price=" + #FilterPrice.val());
});

这样的列表还在继续，你可以看到如果我的过滤器列表有 20 个选项，那么我的 javascript 代码就会开始增长并很快变得困惑和丑陋。我知道必须有更好的方法来做到这一点，如何？

还有第二个问题。一旦我们通过了 URL 进入 Controller 的部分，我就会使用 PHP。我只需在 MySQL 中执行 WHERE 查询即可返回结果。

所以看起来像:

if ($State != '' && $County != 'null' && $isOnlineDeal != '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County != 'null' &&  $isOnlineDeal == '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County == 'null' &&  $isOnlineDeal == '') {
                $query = "select * from posts where ...";
            } elseif ($State == '' && $County == 'null' &&  $isOnlineDeal == '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County == 'null' &&  $isOnlineDeal == '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County != 'null' &&  $isOnlineDeal == '') {
                $query = "select * from posts where ...";
            } elseif (&& $State == '' && $County == 'null' &&  $isOnlineDeal != '') {
                $query = "select * from posts where ...";
            } elseif ($State == '' && $County == 'null' &&  $isOnlineDeal != '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County == 'null' &&  $isOnlineDeal != '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County != 'null' &&  $isOnlineDeal != '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County == 'null' &&  $isOnlineDeal != '') {
                $query = "select * from posts where ...";
            } elseif ($State != '' && $County != 'null' &&  $isOnlineDeal != '') {
                $query = "select * from posts where ...";
            } else {
                $query = "select * from posts";
            }

正如你所看到的，我只是做了一堆 elseif 来检查变量是否不为空并基于此进行查询。一旦我的过滤器选项开始变大，这个选项也会变大。

具体数据已被更改，并不重要，我真正想找出的是:1. 使用 javascript/jquery 将 url 参数附加到 url 的最佳方法是什么。2.在没有乱码的情况下，如何在MySQL中过滤这些URL参数。

Answer 1

对于您问题的第一部分:只需使用类似的东西从表单中获取 JSON 格式的所有内容

json = {}
$('input[data-send="true"]').forEach(function() { //example selector
    key = $(this).getattr("name");
    value = $(this).val();
    json[key] = value;
});

然后使用类似的东西将其解析为 URI

var uri = Object.keys(json).map(function(key){ 
  return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
}).join('&');

您可以轻松地反转该过程以重新加载值。

至于 PHP 清理 - 您可以考虑编写某种处理程序，其中每个 URI 都会有不同的监听器...但这将是一种矫枉过正:也许 switch 使用一个枚举？老实说，过去 3 年里我并没有编写很多 PHP 代码。