Как правильно настроить простой AJAX

Question

Так что, если я настрою это без ajax, он будет работать нормально.Как только я включаю ajax, страница загружает строку URL с «? Search = 63105», но ничего не отображается в результатах div

HTML + Jquery

<form>
<input type="text" name="search" id="search" placeholder="Search"/>
</form>
<div id="results"></div>



<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
 $("form").on('submit', (function(e){
   var search = $('#search').val();
   var dataString = 'search=' + search;
   e.preventDefault();
   $.ajax({
        type: "POST",
        url: "searchpost.php",
        data: dataString,
        success: function(data) {
            $('#results').html(data);
        }
     });
   });
 });
</script>

PHP Page

<?php
require_once('../config/db.php');
require_once('../customLIB/pdo_db.php');
require_once('../models/test.php');
$SalesRep = new SalesRep();

if ($_POST['search']) {
 $data = $_POST['search'];
 $rep = $SalesRep->getRep($data);

 if (!empty($rep)) {
    echo $rep->name;
  } else {
    echo "No sales reps found..";
  }
}
?>

Опять же, даже если результаты должны быть показаны, ничего не показывает.PHP работает, с этим проблем нет.

Спасибо.

Answer 1

Вы используете метод post, измените данные параметра post: {'search': search} И, вставив echo в файл PHP, верните значение из PHP.

Answer 2

Функция отправки формы, у вас есть строка e.preventDefault(), однако функция никогда не принимала аргумент события e.

$("form").on('submit', (function(){
    e.preventDefault();
    //...
});

Вместо этого должно быть

$("form").on('submit', (function(e) {
    e.preventDefault();
    //...
});

Поскольку отправка формы никогда не запрещается, форма отправляется как обычно, и вызов AJAX не выполняется полностью.

РЕДАКТИРОВАТЬ: Кроме того, следующие строки

var search = $('#search').val();
var dataString = 'search=' + search;

должны быть в пределах отправкифункция.Только тогда он получит значение #search при отправке поиска.

EDIT4: обнаружил, что выполнение var dataString = 'search=' + search; работает в любом случае, поэтому EDIT2 можно игнорировать.

EDIT2: нетслишком хорошо знакомы с PHP-аспектами, но данные POST обычно делаются с помощью объектов JavaScript.Попробуйте dataString be

var dataString = { search: search };

Или, что еще лучше, попросите сериализовать саму форму

var dataString = $('form').serialize();

EDIT3: Найдены дополнительные скобки, которые могут быть причиной проблемы.

$("form").on('submit', -->(function(e){

Окончательный код должен быть

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "searchpost.php",
            data: $('form').serialize(),
            success: function (data) {
                $('#results').html(data);
            }
        });
    });
});