Ajaxの非同期通信で画面が更新してしまう。

Question

phpとJS(Ajax)を用いてチャットアプリの作成をしています。
ネットに転がっているものを参考にしつつ作成をしています。
DBから受け取ったメッセージを表示することはできているのですが、
メッセージをユーザーが入力し、送信を押した際に画面がリロードされて更新されてしまいます。

画面が更新せずに機能されるにはどの点が間違っているのでしょうか。
Ajaxのコードを以下に貼ります。
よろしくお願いいたします。

const form = document.querySelector(".typing-area"),
inputField = form.querySelector("input-field"),
sendBtn = form.querySelector("button"),
chatBox = document.querySelector(".chat-box");


function scrollToBottom(){
  chatBox.scrollTop = chatBox.scrollHeight;
}

sendBtn.onclick = ()=>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "insert-chat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){
          if(xhr.status === 200){
              inputField.value = "";
              scrollToBottom();
          }
      }
    }
    let formData = new FormData(form);
    xhr.send(formData);
}


setInterval(() =>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "get-chat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){
          if(xhr.status === 200){
            let data = xhr.response;
            chatBox.innerHTML = data;
            scrollToBottom();
          }
      }
    }

    let formData = new FormData(form);
    xhr.send(formData);
    
}, ５００);

Answer 1

送信ボタンのtype属性をbuttonにしてください。

<button type="button">送信</button>

Comments

[alyssa703957]

ありがとうございます！！できました！！