PHP ответ исчезает

Question

Я пытаюсь получить ответ через ajax, мой код (index.html):

<button id="register">Register</button>
<p id="result">xxx</p>

<script>
    $("#register").click(function(){
        $.ajax({
            url:'registration.php',
            type: 'POST',
            success:function(response){
                $("#result").html(response)
            }
        })
    })
</script>

и php (registration.php):

<?php 
echo "yyy"
?>

Я работаю сxampp, я получаю ответ, но он мгновенно исчезает со страницы.И снова xxx присутствует внутри тега p, кто-нибудь знает, что является причиной, почему это происходит.Спасибо

Answer 1

Просто заблокируйте страницу перед отправкой.

<input type='submit' id='register'>
<div id='result'></div>
$("#register").click(function(e){
 e.preventDefault();
 $.ajax({
  url:'registration.php',
  type: 'GET',
  success:function(response){
   document.getElementById("result").innerHTML = response;
  }
 })
});

Answer 2

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

<script>
$("#register").click(function(evt) {
  evt.preventDefault()

  $.ajax({
    url:'registration.php',
    type: 'POST',
    success: function (response) {
      $("#result").html(response)
    }
  })
})
</script>

Это не позволяет вашему браузеру делать то, что он обычно делает, когда вы нажимаете кнопку. Любая кнопка внутри тегов <form> автоматически отправляет запрос GET в пределахтекущее окно, в результате чего страница обновляется.Другой альтернативой preventDefault() является использование атрибута type="button" на вашей кнопке, и это не позволит кнопке стать кнопкой type="submit".

Более подробную информацию о функции, которую я использовал, вы можете прочитать здесь:

• https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
• https://api.jquery.com/event.preventdefault/