提交后页面正在重新加载

Question

我正在尝试从我的表单中检索数据，使用 Node.js get 方法处理它并在网页上放置响应。除了一件事，一切都很好：页面在最后重新加载，因此接收到的数据不会在那里停留太久。

我做错了什么？

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

表单提交时的默认浏览器行为。你需要防止它发生。

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

@Ondra Koupil 提出的更新

更好的解决方案是绑定 submit 事件。这也将处理通过键盘发起的表单提交 (ctrl + enter)

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

Answer 2

通过使用 <button> 元素提交表单，页面被强制重新加载。

您应该使用 <a href='javascript:;'>

而不是 <button>

提交后页面正在重新加载

Page is reloading after submitting

html

javascript

reload

node.js