Страница по-прежнему обновляется с помощью ajax

ProgramBox

Страница по-прежнему обновляется с помощью ajax

Post author:admin
Запись опубликована:27 августа, 2022
Post category:Вопросы по программированию

#jquery #ajax

Вопрос:

HTML:

 <body>
<form name='sample' id='sample' method='GET' action='followedbutton.php'>
Name:<input type='text' name='username' id='username'><br>
Age:<input type='text' name='userage' id='userage'><br>
Date:<input type='text' name='userdate' id='userdate'><br>
<input type='submit' name='submit' id='submit' value='Go!'>
</form>
</body>

JS :

 <script>
$(document).ready(function () {
    var $form = $('#sample');
    $form.submit(function (e) {
        $.GET(url: $(form).attr('action'), data: $(form).serialize(), success: function (result) {
            $('#div').html(result)
        }, 'json');
        return false;
        e.preventDefault();
    });
});
</script>

Страница успеха PHP:

 <?php
error_reporting(E_ALL); ini_set('display_errors', 1); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);    
$conn = mysqli_connect('localhost', 'root', '') or die ("No mysqli");
        mysqli_select_db($conn, 'sample') or die ("No DB");
$name = $_GET['username'];
$age = $_GET['userage'];
$date = $_GET['userdate'];
$insert = ("INSERT INTO `test` (name, age, date) VALUES ('$name','$age','$date')");
$insert_query = mysqli_query($conn, $insert) or die ("No query");
mysqli_close($conn);
//header('location:followbutton.php');
echo "<script text='javascript'>alert('Ajax');</script>"
 ?>

Поэтому я пытаюсь отправить эту форму БЕЗ обновления страницы. Когда я отправляю форму, я получаю предупреждение немедленно, без обновления страницы. Но на моей вкладке Chrome я вижу, что страница все еще загружается, и в конце концов (примерно через 5-7 секунд) страница переходит на followedbutton.php .

Как я могу предотвратить обновление страницы, сохраняя при этом доступ к моей информации followedbutton.php ? Что в моем коде JS необходимо изменить? Все работает, я просто НЕ хочу, чтобы страница обновлялась вообще.

Я воспользовался некоторыми советами других пользователей SO, которые задавали похожие вопросы, но ни один из советов не работает для меня.

Я воспользовался советом в этом сообщении, чтобы изменить свой код на :

 <script>
$(document).ready(function(){
var $form = $('#sample');
$form.submit(function(e){
e.preventDefault();
$.get( url:$(form).attr('action'), data:$(form).serialize(), success:function(result)  {$('#div').html(result)},'json'); 
  return false;
});
});
</script>

Но, к сожалению, все равно получаю тот же результат. И, к сожалению, мне еще предстоит узнать, как использовать мою консоль JS для целей отладки. Однако это входит в список того, что нужно сделать.

1. Вы включаете jQuery на страницу? Проверил консоль на наличие ошибок?

2. да <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

3. Ваш вызов по $.get -прежнему выдает синтаксическую ошибку из-за url: , data: , и т.д. Смотрите мой обновленный ответ (или Джеймса) для правильного способа вызова $.get .

4. И, как указывали другие, когда вы работаете с JavaScript, у вас всегда должна быть открыта консоль разработки вашего браузера. Это даст вам информацию о синтаксических ошибках и других проблемах с вашим кодом.

Ответ №1:

Такой вещи, как $.GET она есть, не $.get существует . Он чувствителен к регистру. В результате ваш код взрывается до предотвращения поведения по умолчанию, поэтому он отправляется. Как только вы это исправите, вы также обнаружите, что используете get неправильно.

Всегда проверяйте свою консоль js, она бы сказала вам, что это проблема.

Правильный вызов get :

 $.get($(form).attr('action'), 
      $(form).serialize(), 
      function (result) {
            $('#div').html(result)
      }, 
      'json');

Ответ №2:

e.preventDefault() никогда не оценивается, если вы return перед этим:

 function(e) {
  // ...
  return false;
  e.preventDefault(); // <-- never happens
}

Существует также проблема с тем, как вы вызываете $.GET (что, как указывали другие, должно быть $.get ). Похоже, вы пытались передать объект настроек $.get , как вы бы $.ajax , но в вашем коде есть две проблемы:

Вы опустили фигурные скобки вокруг объекта ( foo(bar: 1) недопустимый JavaScript; foo({ bar: 1 }) is), что приведет к синтаксической ошибке.
Даже если вы исправили это, это не сработает, потому что в отличие $.ajax от , $.get не принимает объект настроек; он принимает четыре отдельных аргумента для url , data , success и dataType .

То, что вы на самом деле хотите, это:

 $.get( $(form).attr('action'),  // url
       $(form).serialize(),     // data
       function (result) {      // success
         $('#div').html(result)
       },
       'json'                   // dataType
);

1. Верно, но на самом деле не имеет значения. return false также предотвращает дефолт.

2. Get вызывается не так, он не принимает объект в качестве параметра, он принимает 1-4 отдельных параметра.

3. Ты прав, @JamesMontagne. Раздражает это $.get и $.ajax не имеет согласованного API. Несмотря на это, раньше это была синтаксическая ошибка.

Метки: Страница по-прежнему обновляется с помощью ajax