AJAX Live Search Использование только jQuery работает

Question

Ниже приведен сценарий, используемый для запуска прямого поиска.

<script> 
    $(".search").keyup(function() { 

     var Team_Name = $('#TeamName').val(); 
     var Teacher = $('#Teacher').val(); 

     var Search_Data = Team_Name + '?????' + Teacher; 

     $.ajax({ 
      type: "POST", 
      url: "Student Search Results.php", 
      data: { 
       query: Search_Data 
      }, 
      cache: false, 
      success: function() { 
       alert('The values were sent'); 
      } 
     }); 
    }); 
</script> 


<?php 

include "Student Search Results.php"; 

?> 

Живой поиск работает нормально, за исключением, что он не повторяется (она запускается только один раз, когда страница первой загрузки). Есть ли какие-либо идеи относительно того, почему это может быть? Спасибо.

Answer 1

Вы смешиваете статический процесс с динамическим. <?php include() ?> будет запущен на сервере и не будет снова выполнен на этой странице. Независимо от того, сколько раз ваша функция AJAX отправляет данные, ваша страница никогда не изменится, поскольку она уже была загружена давно.

Что вам нужно сделать, так это оставить полностью include() и использовать JSON или XML для ответа через PHP-файл непосредственно в эту функцию $.ajax().

Затем вы можете использовать jQuery/JS для анализа данных в нечто красивое и организованное.

---

Вот немного более подробно:

На странице PHP вы собираетесь слушать для $_POST['query'] и запустить функцию, как обычно. Но вместо того, чтобы печатать его, однако ваша страница PHP теперь, вам нужно отделить часть разметки этой страницы от выполнения PHP.

Затем вы получите эту разметку и поместите ее под своим скриптом в том же месте, где у вас есть <?php include(); ?>. Для JQuery, чтобы обновить это по требованию, как вы хотите, изменить:

... 
success: function() { 
    alert(); 
} 

передать полученные данные со страницы PHP, как это:

... 
success: function(data) { 
    var i = 0; 
    for (i in data) { 
     $('#searchResults').find('.resultNumber').append(i++); 
     $('#searchResults').find('.team-name').append(data.teamName); 
     $('#searchResults').find('.teacher').append(data.teacher); 
    } 
} 

И здесь есть <table id="searchResults"> и некоторые <td> s и <tr> s и т. Д.