Seite wird nach dem Senden neu geladen

Question

Ich versuche, Daten aus meinem Formular abrufen, verarbeiten Sie mit Node.js get Methode und eine Antwort auf einer Webseite. Es funktioniert alles außer einer Sache: Die Seite wird am Ende neu geladen, so dass die empfangenen Daten nicht lange dort bleiben.

Was mache ich falsch?

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

Standard-Browser Verhalten auf Formular. Sie müssen verhindern, dass es passiert.

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

Update-Vorschlag @Ondra Koupil

Bessere Lösung auf submit Ereignis zu binden wäre. Dies würde auch Form submition über die Tastatur (ctrl + enter) initiiert Griff

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

Answer 2

das <button> Element Durch die Verwendung des Formular abzuschicken, wird die Seite neu zu laden gezwungen.

Statt <button> sollten Sie <a href='javascript:;'>