0

大家好，我是使用 jQuery 的新手，我想将 AJAX 功能用于我的网站的搜索功能。但是，我在学习这一点时遇到了一些困难，因为我只能找到使用与函数无关的 PHP 的示例。我目前正在尝试从这个 youtube 示例jQuery Youtube Example中学习。然而，这似乎很难实现。

关于我想要实现的一点点。我想在我的搜索栏中输入邮政编码并让它检索所有使用 AJAX 匹配的相关数据字段，以便它显示在搜索栏正下方的 div 中。

由于我对 jQuery 不是很熟悉，我不确定我是否以正确的方式进行此操作，任何输入都将受到热烈欢迎。先感谢您！

我的代码就是这样

索引.php

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<?php include("header.php"); 
$houseobject = new House();
$houseobject->search($_POST['term']);?>
<div id="mainContent">
  <div id="searchformWrap">
    <br/><h2>Search for Accomodation</h2>
    <div id="searchform"><br/><br/><br/>
      <form method="post" action="index.php" name="search" id="search_form">
        <div class="searchrow">
        <div class="searchlabel">Location</div>
        <div class="searchinput"> 
        <input type="text" name="term" id="term" />
        <input type="submit" name="submit" id="searchsubmit" value="Search"/>
      </form>
      <div class="help">e.g. 'PO5' or 'Portsmouth'</div>
    </div> <!-- end input -->
  </div> <!-- end .row -->
  <div id="searchquery"> </div>
</div> <!-- End maincontent -->

类/class.House.inc

<?php 
include ("connect.class.Database.inc");
class House extends Database {

  public function search ($term){
    $query = "SELECT * FROM houses 
      WHERE postcode like '%".$this->mysqli->real_escape_string($term)."%'";
    $result = $this->mysqli->query($query);
    $num_result = $result->num_rows;
    if($num_result > 0){
      while($rows =$result->fetch_assoc()) {        
        $this->data[]=$rows;
        //print_r($rows);
      }      
      return $this->data;
    } else{
       echo 'No Records Found';    
    }
    echo json_encode($data);
  }

}

js/ajax.js

  $('input#searchsubmit').on('click', function() {
    if ($.trim(term) != '') {
       $.post('classes/class.House.inc', {term: term}, function(data) {
          $('div#searchquery').text(data);
       });
    }
  });
}

我通常通过将 index.php 上的表单指向...来获取结果

搜索.php

<table width="500" border="1" cellpadding="5">
 <tr>
  <th width="16" scope="row">id</th>
  <td width="95">bedrooms</td>
  <td width="140">description</td>
  <td width="104">roadname</td>
  <td width="71">postcode</td>
 </tr>
 <?php
 require("classes/class.House.inc");
 $obj = new House();
 if ($data = $obj->search($_POST['term']))
 {
    foreach($obj->data as $val){
      extract($val);
    }
 }
 ?>
 <tr>
      <td scope="row"><?php echo $id; ?></td>
      <td><?php echo $bedrooms; ?></td>
      <td><?php echo $description; ?></td>
      <td><?php echo $roadname; ?></td>
      <td><?php echo $postcode; ?></td>
 </tr>
</table>
4

5 回答 5

2

仔细查看代码后。似乎有几个错误需要解决。

  1. js 不包含在 jQuery 就绪函数中
  2. 未正确检索术语的值
  3. on 方法没有被正确使用
  4. ajax 属性 'url' 必须是小写的
  5. 数据类型必须是 html，因为内容直接写入 DOM
  6. 写法必须是html()因为内容是HTML
  7. 指向的页面不是 PHP 页面，也不是正确的搜索页面

以下是所有这些问题的解决方案：

$(document).ready(function(){
    $('#searchsubmit').on("click", function(){
        // Get the value of the term field      
        var term = $('#term').val();
        // Proceed if the term is not empty
        if($.trim(term)!=''){           
            // Load the html result from the PHP script
            $.ajax({
                url: 'search.php',
                data: 'term='+term,
                type: 'POST',
                dataType: 'html',
                success: function(data){
                    // Place the HTML response into the search query div
                    $('#searchquery').html(data);
                }
            });
        }
    });
});
于 2012-11-08T12:17:41.413 回答
0 
  $("input#searchsubmit").click(function(){
    if ($.trim(term) != '') {
        $("div#searchquery").load("demo_test.txt");
    }
  });

这应该可以正常工作..

于 2012-11-08T12:05:53.467 回答
0

对于使用 Ajax 进行搜索，您不想提交表单，这$houseobject->search($_POST['term']);?>是错误的。对于 Ajax 调用，您必须处理一个click或keyup事件，如果我们谈论 Ajax，我认为这更好。

您可以创建一个新文件，例如ajax_search.php并将搜索到的字符串 ( trim) 发送给它。然后在你的新文件中，你可以创建一个新House对象并调用它的search方法：

include('classes/class.House.inc');

if(isset($_POST['trim'])) {
    $house = new House();
    $json = $house->search();
    $html = '';
    // and build your HTML structure as you are doing it in search.php
    return $html;
}

阿贾克斯调用：

$('input#searchsubmit').on('click', function() {
    var term = $('#term').val();

    if ($.trim(term) != '') {
        $.post('ajax_search.php', {term: term}, function(data) {
            $('div#searchquery').text(data);
        });
    }
});
于 2012-11-08T12:14:06.150 回答
0

这将是您的 jQuery 代码，它将捕获 keyup 事件并获取键入的值。

$('#searchBox').on('keyup', function() {
    var term = $('#term').val();
    if ($.trim(term) != '') {
        $.ajax({
            URL:'classes/class.House.inc', 
            data: 'term='+term,
            dataType :'json',
            success : function(text) {
                var strSrch = '';
                $.each(arr, function(k,v) {
                    var strSrch += '<td>'+v+'</td>'; //or whatever HTML you have
                });
                $('div#searchquery').text(strSrch);
            }
        });
    }
});

现在在 PHP 文件中创建一个类的对象并调用搜索函数。如果进行了 ajax 调用。

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {//this will check if it is an ajax call.
if(isset($_REQUEST['term']) && trim($_REQUEST['term'] !='')){
  $objHouse = new House();
  $searchResult = $objHouse->search($_REQUEST['term']);
  die($searchResult); 
}
}

现在这将为您提供一个 json 对象。您可以在 ajax 调用成功回调中使用它并对其进行解码以制作搜索结果网格。

于 2012-11-08T12:15:08.083 回答
0

您可以使用自动执行此操作的库，例如http://phery-php-ajax.net ，您可以在操作 DOM 的同时在所有操作完成后进行连续调用。检查演示，你会看到

在您的情况下，它将是这样的（注意新的数据远程，它将自动使您的表单 AJAXified）：

 <form method="post" action="index.php" data-remote="search" name="search" id="search_form">
    <div class="searchrow">
    <div class="searchlabel">Location</div>
    <div class="searchinput"> 
    <input type="text" name="term" id="term" />
    <input type="submit" name="submit" id="searchsubmit" value="Search"/>
  </form>

在你的House班级里面：

class House extends Database {

   public function search ($term){
      $query = "SELECT * FROM houses 
      WHERE postcode like '%".$this->mysqli->real_escape_string($term)."%'";
      $result = $this->mysqli->query($query);
      $num_result = $result->num_rows;

      if ($num_result > 0){
        while($rows =$result->fetch_assoc()) {        
           $this->data[]=$rows;
        }      
        return $this->data;
      } 

      return false;
  }

  function ajax_search($data){ // $data got the 'term' key
    $r = new PheryResponse('#searchquery'); // select where to put the results
    $data = $this->search($data['term']);

    if ($data !== false){ // got results
      $table = new PheryResponse('<table/>', array(
        'width' => "500",
        'border' => "1",
        'cellpadding' => "5"
      ));

      $html = <<<HTML
<th width="16" scope="row">id</th>
  <td width="95">bedrooms</td>
  <td width="140">description</td>
  <td width="104">roadname</td>
  <td width="71">postcode</td>
</tr>
HTML;
      foreach ($data as $row)
      {
         $html .= <<<"HTML"
<tr>
  <td>{$row['id']}</td>
  <td>{$row['bedrooms']}</td>
  <td>{$row['description']}</td>
  <td>{$row['roadname']}</td>
  <td>{$row['postcode']}</td>
</tr>
HTML;
      }
      $table->html($html); // Set the html() of the table
      $r->html($table); // Add table to the #searchquery div
    }
    else
    {
      $r->text('No results found');
    }
    return $r; // return your answer
  }
}

您的控制器将具有以下功能：

$house = new House;

Phery::instance()->set(array(
  'search' => array($house, 'ajax_search')
))->process();

就是这样，DIV 将拥有来自您的数据库的新数据。

于 2012-11-12T02:54:12.603 回答