jQuery-Ajax检索PHP类和函数的函数

大家好我是新手使用jQuery，我想使用AJAX函数搜索我的网站function。 但是我学习这个有点困难，因为我只能找到使用非函数相关PHP的例子。 我目前正在尝试从这个youtube示例jQuery Youtube示例中学习 。 然而，这似乎难以实施。

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

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

我的代码是这样的

的index.php

  search($_POST['term']);?> 
 
 
Search for Accomodation
 



 
 
 
Location
 
    
eg 'PO5' or 'Portsmouth'
 
  
  
 
 
  

类/ class.House.inc

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

search.php中

  search($_POST['term'])) { foreach($obj->data as $val){ extract($val); } } ?> 
 
 
id
 
bedrooms
 
description
 
roadname
 
postcode
 
 
 
 
 
 
 
  

Answer 1

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

1. js不包含在jQuery ready函数中
2. 未正确检索term的值
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); } }); } }); }); 

Answer 2

  $("input#searchsubmit").click(function(){ if ($.trim(term) != '') { $("div#searchquery").load("demo_test.txt"); } }); 

这应该工作正常..

Answer 3

对于使用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; } 

Ajax调用：

 $('input#searchsubmit').on('click', function() { var term = $('#term').val(); if ($.trim(term) != '') { $.post('ajax_search.php', {term: term}, function(data) { $('div#searchquery').text(data); }); } }); 

Answer 4

这将是您的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 += ''+v+''; //or whatever HTML you have }); $('div#searchquery').text(strSrch); } }); } }); 

现在在PHP文件中创建类的对象并调用搜索function。 如果已经进行了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调用成功回调中使用并解码它来制作搜索结果网格。

Answer 5

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

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

  
 
 
Location
 
    

你的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('', array( 'width' => "500", 'border' => "1", 'cellpadding' => "5" )); $html = <<id bedrooms description roadname postcode  HTML; foreach ($data as $row) { $html .= <<<"HTML"  {$row['id']} {$row['bedrooms']} {$row['description']} {$row['roadname']} {$row['postcode']}  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将拥有数据库中的新数据。