Ajax JQuery форма поиска в PHP

Question

Это моя форма:

<form id="submitsearch" action="Classes/system/main/searchresult.php" method="POST"> 
Search by <span style="font-size:15px;">(developer, specialization, profession,major)</span> 
    <input type="text" name="searchbox" id="searchbox" /> 
    in 
    <select style="text-align:center;" name="countrysearch" id="countrylist"> 
     <option selected="selected" value="0">None</option> 
     <option value="1">USA</option> 
    </select> 
<input style="margin-left:25px;" id="submitSearch" type="submit" value="Search"/> 
</form> 

и это Ajax код JQuery:

$("#submitSearch").click(function(){ 

    $.ajax({type:'POST', url: 'Classes/requests/search.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) { 
     $('#submitsearch').find('#pagePanel').html(response); 

});  

Почему не работает? Файл php возвращает правильный результат normaly.

Но я хочу, чтобы он загружался внутри другого div с id «pagePanel» без перезагрузки, используя ajax.

Любая помощь? Я новичок в Ajax.

Edit:

$("#submitbutton").click(function(){ 

    $.ajax({type:'POST', url: 'Classes/system/main/searchresult.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) { 
     $('#pagePanel').html(response); 

}})});  

Это работает со мной.

Благодарим за помощь.

Answer 1

Если у вас есть вход типа submit, он, угадайте, что :), отправьте форму и, следовательно, перезагрузите страницу. Включите его в:

<input style="margin-left:25px;" id="submitSearch" type="button" value="Search"/> 

Затем убедитесь, что вы на самом деле естьpagePanel элемент в вашем HTML.

А теперь несколько предложений:

1. не идентификатор вашей формы #submitsearch и кнопка, как #submitSearch ... путаница может возникнуть
2. вы можете использовать Аякса .load() вместо .ajax() получить непосредственно результат в DIV:

Итак:

$("#pagePanel").load('Classes/requests/search.php', {$('#submitsearch').serialize()}); 

Answer 2

Если вы хотите использовать ajax в представлении формы, вам необходимо отменить его.

$("#submitSearch").click(function(event){ 
    $.ajax({type:'POST', url: 'Classes/requests/search.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) { 
     $('#pagePanel').html(response); 
    }); 
    event.preventDefault();//prevents submitting of the form 
} 

Answer 3

Прежде всего вам необходимо прекратить отправку формы по умолчанию. return false в обработчике отправки, чтобы остановить значение по умолчанию. Просто используйте идентификатор элемента, не используя find() для вставки данных. Elemnt вы пытаетесь найти не появляется в вашем HTML, хотя в форме, где ваш код предполагает, что должно быть

$("#submitSearch").click(function(){ 

    $.ajax({type:'POST', 
      url: 'Classes/requests/search.php', 
      data:$('#submitsearch').serialize(), 
      cache: false, 
      success: function(response) { 
       $('#pagePanel').html(response); 
      } 
    }) 

    return false; 

}); 

Answer 4

После нажатия кнопки submit, поведение по умолчанию для отправки формы и действительно пойти URL-адрес действия, который вы указали в своей форме. Теперь вы хотите предотвратить это поведение. Это означает, что вам нужно посмотреть событие onsubmit формы и предотвратить фактическое представление. Для этого у jQuery есть метод preventDefault().

В вашем случае, все, что вам нужно сделать, это добавить следующий код:

$(document).ready(function() { 
    $("#submitsearch").on("submit", function (e) { 
     e.preventDefault(); 
    });   
}); 

И here является jsFiddle, чтобы продемонстрировать это.

Вы можете, очевидно, сделать то же самое для вашей кнопки отправки, просто добавьте e переменные в качестве аргумента для вашего click события и использовать e.preventDefault() отменить фактические представить (но вы можете совершенно сделать запрос AJAX).

Answer 5

Прежде всего, вам не хватает нескольких закрывающих скобок и фигурных скобок. Обязательно запустите свои инструменты разработчика в своем браузере, чтобы проверить консоль на наличие подобных ошибок. Я обычно не использую $ .ajax ... Я обычно использую $ .post, но используя то, что у вас есть до сих пор, я бы переписать что-то ближе к:

$("#submitsearch").submit(function(){ 

    var submitData = $(this).serialize();  
    $.ajax(
     { 
      type:'POST', 
      url: 'Classes/requests/search.php', 
      data: submitData, 
      cache: false, 
      success: function(response) { 
       $('#pagePanel').html(response); 
      } 
     } 
    ); 
    return false; 
});​ 

Answer 6

Вместо отправки обратно нагрузок HTML в на странице вы можете просто отправлять результаты в виде набора объектов JSON, а затем динамически создавать HTML на основе результатов, это означает, что гораздо меньше данных отправляется обратно в браузер, который быстрее и эффективнее.