代码之家 › 专栏 › 技术社区 › Shijil

尝试在Jquery PHP搜索代码中添加选择标记功能

ajax jquery php

Shijil · 技术社区 · 2 年前

这是我用于搜索函数的代码,它从fetch\u data中提取数据。php和它的工作。但是我想在搜索页面中添加一个额外的过滤器选项。例如国家或城市。我尝试了很多方法,但都不管用。

   <script>
  $(document).ready(function(){

    load_data(1);

    function load_data(page, query = '')
    {  
      
      $.ajax({
        url:"fetch_data.php",
        method:"POST",
        data:{page:page, query:query},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      });
    }

    $(document).on('click', '.page-link', function(){
      var page = $(this).data('page_number');
      var query = $('#search_box').val();
      load_data(page, query);
    });

    $('#search_box').keyup(function(){
      var query = $('#search_box').val();
      load_data(1, query);
    });

  }); 
 </script>

这将从fetch_数据中提取数据。html格式 $_POST['query'] 我还想根据HTML标记的输入过滤数据。我能够获取fetch_数据。html端工作,通过手动添加选择城市。但是如何使用HTML标记和ajax代码为每个搜索选择城市。

我只想从HTML标记数据中获取输入,如下所示 $_POST['city'] 在fetch_数据上。html页面。

我尝试了以下方法,但没有成功。对于tets,我使用了第二个搜索字段,但是 $\u POST[“城市”] 仍显示与相同的结果 $\u POST['query'] .

   <script>
  $(document).ready(function(){

    load_data(1);

    function load_data(page, query = '', city = '')
    {  
      
      $.ajax({
        url:"fetch_data.php",
        method:"POST",
        data:{page:page, query:query, city:city},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      });
    }

    $(document).on('click', '.page-link', function(){
      var page = $(this).data('page_number');
      var query = $('#search_box').val();
      var city = $('#city_box').val();
      load_data(page, query, city);
    });

    $('#search_box').keyup(function(){
      var query = $('#search_box').val();
      load_data(1, query);
    });
    $('#city_box').keyup(function(){
      var city = $('#city_box').val();
      load_data(1, city);
    });

  });
</script>

选择标记示例

<select name="city_box" id="city_box">
  <option value="newyork">New York</option>
  <option value="london">London</option>
  <option value="tokyo">Tokyo</option>
  <option value="paris">Paris</option>
</select>

1 回复 | 直到 2 年前

user2371266 2 年前

这里有几件事:

如果您正在从服务器请求数据,那么实际上应该使用GET请求,而不是POST。您可以在请求的查询字符串中添加查询、城市等。
从city\u box函数调用load\u数据时缺少参数。由于查询和城市都是可选的,因此它将假设您传递的“城市”实际上是查询,并将城市作为空字符串保留。手动为查询参数添加一个空字符串应该可以解决这个问题,例如。

$('#city_box').keyup(function(){
  var city = $('#city_box').val();
  load_data(1, '', city);
});

在这两个keyup函数中获取当前城市和查询可能是值得的,这样,无论您只更改哪个,都不会重置该查询。这也将解决上述第2条中指出的问题。例如

$('#search_box').keyup(function () {
    var query = $('#search_box').val();
    var city = $('#city_box').val();
    load_data(1, query, city);
});
$('#city_box').keyup(function () {
    var query = $('#search_box').val();
    var city = $('#city_box').val();
    load_data(1, query, city);
});