通过 jquery 传递搜索参数

Posted 2023-02-24

【中文标题】通过 jquery 传递搜索参数

【英文标题】：passing search parameter through jquery

【发布时间】：2011-03-21 08:43:56

【问题描述】：

我有一个表单，如果用户输入搜索查询，则其参数应通过 jquery 传递，并在获得结果后将结果加载到 div 容器中。由于我对 jquery 不是很精通，我该怎么做呢？

html:

    //currently the data is being displayed on pageload:
    $(document).ready(function() 
    $("#bquote").load("quotes_in.php")
   );  

   $(".bsearch")
    .keydown(function() 
    //pass the parameter to the php page

       //display in div #bquote

    );


 <!-- Begin Search -->
        <div id="search" style="display:none;">
                <input type="text" class="bsearch" name="search" value="Search" />
        </div>
<!-- End Search -->

php [使用 OOP]：

if (isset($_POST["search"])) 

    $quotes->searchQuotes();

php类：

  $search = $_POST['search'];

  $sql = "SELECT * FROM thquotes WHERE cQuotes LIKE '%"
  .  mysql_real_escape_string($search) ."%' ORDER BY idQuotes DESC";


  try 

  $query = $this->_db->prepare($sql);
  $query->execute();

  if(!$query->rowCount()==0)
  
   while($row = $query->fetch())
    
    echo $this->formatSearch($row);

【参考方案1】：

我会这样做：

$(".bsearch").keydown(function() 
  //create post data
  var postData =  
    "bsearch" : $(this).val(), 
    "anotherParam" : "anotherValue" 
  ;

  //make the call
  $.ajax(
    type: "POST",
    url: "yourAjaxUrl.php",
    data: postData, //send it along with your call
    success: function(response)
      alert(response); //see what comes out
      //fill your div with the response
      $("#bquote").html(response);
    
  );
);

编辑：

要放置装载机，您需要在此处检查：

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

并以显示加载器图像为例：

$("#loading").ajaxStart(function()
   $(this).show();
);

并在 ajax 调用完成时隐藏它：

$("#loading").ajaxComplete(function()
   $(this).hide();
 );

【讨论】：

谢谢，这可行，但如果我想在#bquote 容器中显示结果怎么办？此外，由于它正在获取数据，因此没有迹象表明它正在后台获取数据。我会在哪里显示 loaderR？

【参考方案2】：

如果你想走 ajax 路线……

$(".bsearch").keydown(function() 

    // Get the current input value
    var value = $(this).val(); 

    //pass the parameter to the php page
    $.ajax(
       type: "POST",
       url: "some.php", // replace this with the right URL
       data: "bsearch=" + value,
       success: function(msg)
          $("#search").html(msg);
       
    );         
);

阅读jQuery.ajax()，如果您将该搜索框转换为适当的形式，请使用jQuery.serialize()

【讨论】：

谢谢！如果我想在#bquote 容器中显示结果怎么办？

【参考方案3】：

您可以使用 $_GET 或 $_REQUEST 而不是使用 $_POST，如下所示：

var searchString = $(".bsearch").val();
$("#bquote").load("path_to_php_file.php?search="+searchString);

然后，在 PHP 中，替换

$_POST

...与

$_GET