javascript - 提交表单而不重定向到其他页面

Question

我一直在尝试制作一个在线HTML表单，它可以提交表单并将数据发布到本地数据库。但是，我不希望页面重定向到 /formfill URL 并将数据发送到数据库而不重定向页面。我已经尝试了很多。然而，没有运气。 这是我的后端 Node.js 代码:

// require('./../config.js');
const express = require('express');
const path = require('path');
var bodyParser = require('body-parser');
var app = express();
var {
    mongoose
} = require('./models/mongoose.js');
var {
    Data
} = require('./models/form.js');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, '..', 'public')));

app.post('/formfill', function (req, res) {

    var data = new Data({
        name: req.body.name,
        mailId: req.body.mailId
    })

    data.save().then((doc) => {
        res.status(200).send(doc);
    }).catch((e)=>{
        res.status(400).send(e);
    })
})


app.listen(3000, () => {
    console.log("Server is up");
});

这是我的 Html 表单:

<form action="/formfill" method="POST" , enctype="application/x-www-form-urlencoded">
  <input class="formfill" type="text" name="name" placeholder="Your name">
  <br>
  <input class="formfill" type="text" name="mailId" placeholder="Your email">
  <br>
  <input id="submit-button" class="formfill sumbit-button" type="submit" value="Submit">
</form>

这是我的 JavaScript 代码，也尝试过使用 AJAX:

$(function() {
  $("#submit-button").submit(function(e) {
    e.preventDefault();
    return false;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/formfill" method="POST" , enctype="application/x-www-form-urlencoded">
  <input class="formfill" type="text" name="name" placeholder="Your name">
  <br>
  <input class="formfill" type="text" name="mailId" placeholder="Your email">
  <br>
  <input id="submit-button" class="formfill sumbit-button" type="submit" value="Submit">
</form>

使用 AJAX:-

$(function() {
  $("#submit-button").submit(function(e) {
    e.preventDefault();
    var formData = new FormData($(this));
    $.ajax({
      url: '/formfill',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(response) {
        console.log(response);
      }
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/formfill" method="POST" , enctype="application/x-www-form-urlencoded">
  <input class="formfill" type="text" name="name" placeholder="Your name">
  <br>
  <input class="formfill" type="text" name="mailId" placeholder="Your email">
  <br>
  <input id="submit-button" class="formfill sumbit-button" type="submit" value="Submit">
</form>

我想做的就是提交表单，而不被重定向到 /formfill 或刷新页面。

Answer 1

将 $("#submit-button").submit(function(e) { 替换为 $("#submit-button").closest("form").submit(function(e) { :-)

preventDefault 方法似乎有效:

function customSubmit () {
  $("#on-btn").attr("disabled", "disabled");
  $("#off-btn").removeAttr("disabled");
  $("form").on("submit", function (ev) {
    ev.preventDefault();
    console.log($(this).serialize());
  });
}
function defaultSubmit () {
  $("#off-btn").attr("disabled", "disabled");
  $("#on-btn").removeAttr("disabled");
  $("form").off("submit");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button id="on-btn" type="button" onclick="customSubmit()">Custom submit</button>
  <button id="off-btn" type="button" onclick="defaultSubmit()" disabled>Default submit</button>
</p>
<form action="" method="POST">
  <input type="text" name="dummy" value="dummy">
  <input type="submit" name="submit">
</form>