具有PHP类和函数的jQuery-Ajax检索函数 [英] jQuery-Ajax retrieve function with PHP classes and functions

问题描述

您好，我是使用jQuery的新手，我想将AJAX函数用于网站的搜索功能.但是，由于我只能找到使用与功能无关的PHP的示例，因此学习起来有些困难.我目前正在尝试从这个youtube示例 jQuery Youtube示例中学习.但是，这似乎很难实现.

Hi all I am new to using jQuery and I want to use the AJAX function for the search function my website. However I am having a bit of difficulty learning this as I can only find examples of using non function related PHP. I am currently trying to learn from this youtube example jQuery Youtube Example . However this seems difficult to implement.

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

A little bit about what I am trying to achieve. I want to type in the postcode into my search bar and have it retrive all the relevant data fields that match using AJAX so that it is displayed in the div directly below the search bar.

由于我对jQuery不太熟悉，因此不确定是否要以正确的方式进行操作，任何输入都会受到热烈欢迎.预先谢谢你！

As I'm not very familiar with jQuery I'm not sure if I am going about this the right way, any input will be warmly welcomed. Thank you in advance!

我的代码是这样

index.php

index.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 -->

classes/class.House.inc

classes/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

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上的表单指向...来获取结果.

I have usually been grabbing results by pointing the form on index.php to...

search.php

search.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>

推荐答案

仔细查看代码后.看来有几个错误需要解决.

After looking through the code carefully. It appears that there are several errors that need to be addressed.

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

1. The js is not contained within the jQuery ready function
2. The value of term is not being retrieved correctly
3. The on method is not being used properly
4. The ajax property 'url' must be lowercase
5. The data type must be html as the content is being written straight to the DOM
6. The writing method must be html() as the content is HTML
7. The page being pointed to was not a PHP page, and was not the correct search page

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

Below is the solution to all of these issues:

$(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);
                }
            });
        }
    });
});

这篇关于具有PHP类和函数的jQuery-Ajax检索函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！