提交后页面正在重新加载

Question

I'm trying to retrieve data from my form, process it using Node.js get method and place a response on a webpage. It all works well except one thing: the page is reloaded at the very end so the received data doesn't stay there for long.

What am I doing wrong?

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

Default browser behaviour on form submit. You need to prevent it from happening.

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

Update proposed by @Ondra Koupil

Better solution would be to bind on submit event. This would also handle form submition initiated via keyboard ( ctrl + enter )

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

Answer 2

By using the <button> element to submit the form, the page is forced to reload.

Instead of <button> you should use <a href='javascript:;'>