jQuery показывает вывод, но мгновенно исчезает

#javascript #jquery

Вопрос:

Я создаю PHP-приложение, в котором мне нужно отправить переменную JavaScript на ту же страницу, а затем использовать ее в PHP. Однако, когда я запускаю свой код, вывод отображается и является правильным, но он исчезает и исчезает.

 $.ajax({
    type: 'POST',
    url: 'ajax.php',
    data:  { id: 1},
    success: function(result) {
        $('body').html(result);
        console.log(result);
    },
    error: function() {
        alert('Some error happened. Please try again!');
    }
});

Я получил доступ к опубликованной переменной через переменную PHP post, и вывод правильный, но я не могу заставить его оставаться на экране. Является ли innerHTML моего ajax.php быть перезаписанным?

Консоль также показывает правильный вывод!

1. Делает ли это то же самое, если вы передаете какой-то простой html $('body').html('<h2>Test</h2>') вместо result ?

2. НЕТ, там просто есть вывод «Test»

3. Означает ли это, что он остается там?

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

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

Ответ №1:

Вы делаете что-то еще со своим html <body> -элементом? На вашем месте я бы создал новый элемент в теле и поместил туда ваши результаты.

 $.ajax({
  type: 'POST',
  url: 'ajax.php',
  data:  { id: 1},
  success: function(result) {
    $('#results').html(result);
    console.log(result);
  },
  error: function() {
    alert('Some error found. Please try again!');
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="results"></div>
  </body>
</html>

1. теперь я получаю значение NAN, когда я попытался получить доступ к переменной id

2. Я больше ничего не менял в javascript, кроме $('#results').html(result); строки. Можете ли вы опубликовать больше кода?

3. @dontay У вас этот идентификатор жестко задан или он исходит от чего-то другого? Если он поступает откуда-то еще, могу ли я увидеть код? NAN означает, что вы передаете что-то, что не является числом, в javascript. Я бы предположил, что это либо строка, либо нулевое значение.

4. идентификатор жестко запрограммирован, когда я записываю вывод на свою консоль, идентификатор показывает значение 1, но NaN в моем выводе html

Ответ №2:

Вы вызываете атрибуты тела, попробуйте изменить эту строку:

 $('body').html(result);

Для;

 $("#myResult").html(result);

Теперь вы можете распечатать свой ответ, добавив его в свой HTML-код:

 <div id="myResult"></div>

Если вы хотите выбрать через класс вместо:

 $(".myResult").html(result);

Здесь селектор идентификатора # заменяется селектором класса . , поэтому ваш div теперь станет:

 <div class="myResult"></div>

Теперь попробуйте это:

 $.ajax({
    type: 'POST',
    url: 'ajax.php',
    data:  {id: 1},
    success: function(result) {
        // $('body').html(result);
        // $(".myResult").html(result);

         $("#myResult").html(result);
        console.log(result);
    },
    error: function() {
        alert('Some error found. Please try again!');
    }
});

На стороне HTML введите это:

  <div class="myResult"></div>