Привет всем Я новичок в использовании jQuery, и я хочу использовать функцию AJAX для функции поиска на моем сайте. Однако я немного усложняюсь в этом, так как я могу найти примеры использования PHP, не связанного с функциями. В настоящее время я пытаюсь изучить этот пример jQuery Youtube примера . Однако это сложно реализовать.
Немного о том, чего я пытаюсь достичь. Я хочу ввести почтовый индекс в свою панель поиска и вернуть все соответствующие поля данных, которые соответствуют использованию AJAX, чтобы он отображался в div непосредственно под панелью поиска.
Поскольку я не очень хорошо разбираюсь в jQuery, я не уверен, правильно ли я это сделаю, любой вход будет тепло приветствоваться. Заранее спасибо!
Мой код так же
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">eg '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 на …
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>
После тщательного изучения кода. Похоже, что необходимо устранить несколько ошибок.
html() поскольку содержимое является HTML Ниже приведено решение всех этих вопросов:
$(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); } }); } }); });
$("input#searchsubmit").click(function(){ if ($.trim(term) != '') { $("div#searchquery").load("demo_test.txt"); } });
это должно работать нормально ..
Для поиска с помощью Ajax вы не хотите отправлять форму, поэтому $houseobject->search($_POST['term']);?> Неверен. Для вызова Ajax вам нужно обработать событие click или keyup , которое лучше, по мне, если мы поговорим об Ajax.
Вы можете создать новый файл, например ajax_search.php и отправить 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; }в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); }); } });
Это будет ваш код 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 и декодировать его для создания сетки результатов поиска.
Вы можете использовать библиотеку, которая делает это автоматически, например 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 будут новые данные из вашей базы данных.