投稿後にページがリロードされています

Question

フォームからデータを取得しようとしていますが、Node.js getメソッドを使用して処理し、ウェブページにレスポンスを配置しています。 1つのことを除いてすべて正常に動作します。ページは最後にリロードされ、受信したデータはそこに長く留まらないようにします。

私は間違っていますか？

script.js：

;!function() { 
    'use strict'; 

    const form = document.forms['user']; 
    form.elements['submit'].addEventListener('click',() => { 
    let xhr = new XMLHttpRequest(); 

    let onload =() => { 
     document.querySelector('#result').innerHTML = xhr.responseText; 
     xhr.removeEventListener('load', onload); 
    }; 

    xhr.addEventListener('load', onload); 

    xhr.open('GET', '/firstName'); 
    xhr.send(form.elements['firstName']); 
    }); 

}(); 

app.js：

var express = require('express'); 
var mysql = require('mysql'); 

var app = express(); 
app.use(express.static('public')); 


var connection = mysql.createConnection({ 
    host: 'localhost', 
    port: '8889', 
    user: 'root', 
    password: 'root', 
    database: 'user' 
}); 

connection.connect(err => { 
    if (err) { 
    console.log(err); 
    } else { 
    console.log('connected'); 
    } 
}); 

app.get('/firstName', (req, res) => { 
    connection.query('SELECT * FROM user', (err, rows, fields) => { 
    if (err) { 
     console.log(err); 
    } else { 
     console.log("SUCCESS"); 
     res.send(rows); 
    } 
    }); 
}); 

app.listen(3000); 

Answer 1

提出フォーム上のデフォルトのブラウザの動作。あなたはそれが起こらないようにする必要があります。 @Ondra Koupil

よりよい解決策が提案し

form.elements['submit'].addEventListener('click', (ev) => { 
    ev.preventDefault() 

アップデートはsubmitイベントにバインドすることです。これはまた、フォームを送信するために<button>要素を使用することにより、キーボード（ctrl + enter）を介して開始されたフォームsubmition

form.addEventListener('submit', (ev) => { 
    ev.preventDefault() 
    // ... rest of your code 

Answer 2

を扱うでしょう、ページをリロードすることを余儀なくされます。代わりに<button>の

あなたが使用する必要がありますあなたは...ないclick` `ためのフォームの` submit`イベントに耳を傾け、あなたがキャッチしたときにyuoは `event.preventDefaultを（行う必要があり、イベントを提出しなければならない<a href='javascript:;'>