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>元素提交表单，页面将被强制重新加载。

而不是<button>，您应该使用<a href='javascript:;'>

页面在提交后重新加载

2 个答案: