AJAX через jQuery обновляет страницу

У меня есть скрипт PHP, который подключается к БД, выполняет простой выбор и возвращает один номер назад. Скрипт отлично работает, я могу проверить его, добавивAJAX через jQuery обновляет страницу

action="search_ODtime.php" method="POST"

в мою форму. Но все это не работает. Вся страница обновляется, и я ничего не получаю. Я убил весь день, пытаясь понять, что здесь не так. Кто-нибудь есть идеи?

Мой HTML-файл:

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
     </script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
     $('#time_search').bind('submit', function() { 
      var origin = $('#origin').val(); 
      var destination = $('#destination').val(); 
      alert(origin); 

      $.ajax({ 
       type: "POST", 
       url: "search_ODtime.php", 
       data: 'origin=' + origin + '&destination=' + destination, 
       success: function(data) { 
        $('#search_results').html(data); 
       } 
      }); 
     }); 
     }); 
     </script> 
     </head> 
     <fieldset style="font-size:11pt; opacity: 1; color: white;"> 
     <form id="time_search"> 
      Orinig: 
      <input name="origin" id="origin" type="number" value="1" min="1" max="97"> 
      <br> 
      Destination: 
      <input name="destination" id="destination" type="number" value="1" min="1" max="97"> 
      <br> 

      <input type="submit" value="Get travel time" name="submit" id="submit" style="border-radius: 5px; display: block; margin: 10px auto 10px 0;"> 

     </form> 
     Travel time: 
     <div id="search_results"> 
     </div> 
     </fieldset> 
</body> 
</html>

источник

2015-10-01 ievgenii

Что происходит, ваша форма отправляется. Вы можете: a) полностью удалить форму и изменить кнопку отправки на обычную кнопку, а затем привязать свое событие к кнопке вместо формы или b) предотвратить отправку формы.

jQuery передает объект события каждому обработчику события. Объект события имеет метод, называемый preventDefault(), который предотвращает, по умолчанию, действие, независимо от того, отправляет ли он форму или ссылается на страницу или что-то еще.

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

$('#time_search').bind('submit',function(event) { 
    event.preventDefault(); 
    var origin = $('#origin').val(); 
    var destination = $('#destination').val(); 
    alert (origin); 
    $.ajax({ 
     type:"POST", 
     url:"search_ODtime.php", 
     data: 'origin='+origin+'&destination='+destination, 
     success: function(data){ $('#search_results').html(data); } 
    }); 
});

источник

2015-10-01 01:12:43

Большое спасибо за подробное объяснение! Теперь он отлично работает. Я только начал с AJAX сегодня, и в последующих учебниках я ничего не говорил о методе preventDefault(). – ievgenii

Если это решило ваш вопрос, нажмите галочку рядом с ответом, чтобы принять его. – pherris

Некоторые вещи упомянуть:

Первое:

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

('#time_search').bind('submit',function(e) { 
    e.preventDefault();

Второе:

Попробуйте отправить ваши данные в формате JSON например. {"origin": origin, "destination": destination}

источник

2015-10-01 01:01:52

Пожалуйста, не делайте * ответьте кратко. –

Я не вижу сложного ответа. –

«Если вы не можете объяснить это просто, тогда вы не понимаете его достаточно хорошо». .. вы должны на самом деле * объяснить * это, хотя. –

AJAX через jQuery обновляет страницу

ответ

Смежные вопросы