如何提交表单并保存至数据库？——教你submit的用法 (submit 提交表单数据库)
在网页制作中，尤其是在前后端分离、动态交互内容多的网页中，表单是一个非常重要的元素，它可以搜集用户的信息并将信息与后台进行交互，这样网页便能提供更为吸引人的功能和内容。而在表单提交中，该如何使用submit方法，从而成功将用户填写的信息保存至数据库中呢？本篇文章将为各位网页制作者详细介绍submit的使用方法。
一、了解submit方法
submit方法是HTML DOM对象中的方法，它用于将当前表单的信息提交给服务器，也就是将form中的数据提交至后台，以供后续处理。在使用该方法时，常常会搭配使用button或input标签类型的submit按钮，从而实现表单的快速提交。
二、submit方法的基本用法
在使用submit方法前，需要先获得表单的DOM对象，在获取到表单对象后，需要为该表单对象调用submit方法，并将所需要提交的数据、提交方式等作为参数传入submit方法中，才能成功将表单数据传递至后台。
以下是submit方法的基本用法：
“`javascript
document.forms[0].submit();
“`
该段代码会将之一个表单对象提交至后台，若要将特定的表单对象提交至后台，需要通过表单ID或表单名称进行调用，如下所示：
“`javascript
document.getElementById(‘formId‘).submit();
document.getElementsByName(‘formName‘)[0].submit();
“`
在submit方法中，还可以指定表单数据的提交方式，如get、post等，该方式需要与后台处理方式一致。在进行表单提交时，常常需要对表单数据进行验证，该验证过程也可通过submit方法实现。
三、submit方法的应用实例
假设我们现在需要制作一个基于node.js的表单提交功能，并将提交结果保存到MongoDB数据库中，该如何来实现呢？
在网页端的HTML代码中，可以使用如下所示的方式编写表单：
“`html
“`
上述代码中，表单数据的提交方式为POST，提交地址为http://localhost:3000/submited，输入框中分别为“用户名”、“邮箱”和“留言”三个输入框，以及一个提交按钮。
在网页端的JavaScript脚本中，可以使用如下所示的方式来调用submit方法，并将表单数据传递至后台：
“`javascript
document.getElementById(“Form01”).onsubmit = function(){
var username = document.getElementsByName(“username”)[0].value;
var eml = document.getElementsByName(“eml”)[0].value;
var message = document.getElementsByName(“message”)[0].value;
var data = {
username: username,
eml: eml,
message: message
}
var xhr = new XMLHttpRequest();
xhr.open(“POST”, “http://localhost:3000/submited”, true);
xhr.setRequestHeader(“Content-Type”, “application/json; charset=UTF-8”);
xhr.send(ON.stringify(data));
}
“`
在上述JavaScript代码中，首先通过表单名称或ID获取表单对象，使用onsubmit方法监听表单提交事件，在该事件中获取表单内容，并通过XMLHttpRequest对象将表单内容以ON对象形式发送至后台。需要注意的是，在此处表单数据的提交方式应与网页端编写的表单数据提交方式一致，此处为POST方式提交。
在后台处理程序中，可以使用如下所示的方式接收表单数据：
“`javascript
var bodyParser = require(‘body-parser’);
require(‘./db/db’);
var submitedSchema = new mongoose.Schema({
username: String,
eml: String,
message: String,
time: {
type: Date, default: Date.now
}
});
var Submited = mongoose.model(‘submiteds‘,submitedSchema);
app.use(bodyParser.json());
app.post(‘/submited‘, function(req,res){
var newSubmited = new Submited({
username: req.body.username,
eml: req.body.eml,
message: req.body.message
});
newSubmited.save(function(err,doc){
if(err){
res.send(‘sorry,unknown error‘);
return;
}
res.send(‘success‘);
});
});
“`
在上述代码中，通过body-parser中间件解析表单数据，将表单数据保存至MongoDB数据库中，并返回操作是否成功的“success”或错误信息的“sorry,unknown error”。
综上所述，使用submit方法实现表单快速提交的方法非常简单便捷，只需要通过JavaScript获得表单对象，并传递至后台即可。在实际应用中，为了保证代码的易读性、可维护性，我们通常会将JavaScript代码、CSS样式、数据库处理程序等分离开来，并通过模块引入的方式进行集成。
