script登录表单，数据传向nodejs

时间: 2023-11-25 16:58:39 浏览: 76

【JavaScript源代码】nodejs获取表单数据的三种方法实例.docx

nodejs获取表单数据的三种方法实例　　nodejs作为服务端语言，在开发中注册登录等需通过form表单向后端发送数据进行判断，那作为服务端语言的nodejs通过哪些方法可以接收调用form表单的post请求值呢。　　常见的会用到以下三种，让我们对着例子看看具体用法。　　后端我们使用express插件，需要对express有所了解的才便于阅读哦~　　1、首先npm初始化，下载express包，导入模块后创建服务对象　　//导入express模块　　const express = require("express");　　// 创建服务器对象　　const app = express();　 ### JavaScript源代码：Node.js 获取表单数据的三种方法实例 #### 一、概述在Web开发中，Node.js作为一种流行的后端技术栈，经常被用于处理来自客户端的请求，尤其是涉及用户输入如注册和登录场景。这些场景下通常会使用HTML表单收集用户数据，并通过HTTP POST请求将数据发送到服务器端。Node.js通过不同的方法接收并处理这些表单数据，本文将详细介绍这三种方法，并提供具体的实现示例。 #### 二、环境准备为了演示这些方法，我们首先需要设置一个基本的Node.js开发环境。确保已经安装了Node.js，然后按照以下步骤进行操作： 1. **项目初始化**： ```bash npm init -y ``` 2. **安装Express**： ```bash npm install express --save ``` 3. **导入Express模块并创建服务器对象**： ```javascript const express = require("express"); const app = express(); ``` #### 三、方法一：使用表单提交在本方法中，我们将通过传统的HTML表单提交数据至服务器。用户填写完表单后，点击提交按钮，表单数据将以POST请求的形式发送给服务器端。 1. **HTML表单代码**： ```html <form action="/todata" method="POST"> <table> <tr> <td>姓名</td> <td><input type="text" name="user" id=""></td> </tr> <tr> <td>密码</td> <td><input type="text" name="password" id=""></td> </tr> <tr> <button type="submit">提交</button> </tr> </table> </form> ``` 2. **Node.js后端代码**： ```javascript app.use(express.urlencoded({ extended: false })); app.post("/todata", (req, res) => { console.log(req.body); res.send("提交成功"); }); ``` - **使用`express.urlencoded()`中间件**：用于解析表单数据，这里的`{ extended: false }`参数表示不使用查询字符串库（qs）来解析URL编码的数据。 - **处理POST请求**：当收到/todata的POST请求时，使用`req.body`来获取表单数据。 #### 四、方法二：使用AJAX发送POST请求另一种常见的方式是使用jQuery的`$.ajax()`方法发送POST请求。这种方式不需要页面刷新即可完成数据的提交，提高了用户体验。 1. **HTML与JavaScript代码**： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <input type="text" id="inp1" placeholder="用户名"> <input type="text" id="inp2" placeholder="密码"> <button id="inp3">提交</button> <script> $("#inp3").on("click", function() { let user = $("#inp1").val(); let password = $("#inp2").val(); $.ajax({ url: "todata", type: "post", data: { user, password }, success: (data) => { alert(data); } }); }); </script> ``` 2. **后端代码**： ```javascript app.post("/todata", (req, res) => { console.log(req.body); res.send("提交成功"); }); ``` - **使用`$.ajax()`**：构建POST请求，并将表单数据作为`data`参数传递。 - **后端处理**：与方法一相同，使用`req.body`获取数据。 #### 五、方法三：使用`serialize()`方法对于表单元素，还可以利用jQuery提供的`serialize()`方法自动序列化表单中的所有字段，并将其作为POST请求的参数发送。 1. **HTML与JavaScript代码**： ```html <form> <input type="text" name="user" id="inp1" placeholder="用户名"> <input type="text" name="password" id="inp2" placeholder="密码"> <button id="inp3">提交</button> </form> <script> $("#inp3").on("click", function() { $.ajax({ url: "todata", type: "post", data: $("form").serialize(), success: (data) => { alert(data); } }); }); </script> ``` 2. **后端代码**： ```javascript app.post("/todata", (req, res) => { console.log(req.body); res.send("提交成功"); }); ``` - **使用`$("form").serialize()`**：自动序列化表单数据。 - **后端处理**：与前两种方法相同。 #### 六、总结以上三种方法分别展示了如何使用传统的HTML表单提交、AJAX异步请求以及`serialize()`方法来处理表单数据。每种方法都有其适用场景，开发者可以根据实际需求选择合适的方法。无论采用哪种方式，都需要确保服务器端能够正确解析并处理接收到的数据，以实现完整且高效的功能实现。

以下是一个简单的登录表单，使用HTML和JavaScript来收集用户输入的数据，然后将数据传递给Node.js服务器。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body> <form id="loginForm"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <button type="submit">Login</button> </form> <script> const form = document.getElementById('loginForm'); form.addEventListener('submit', async (event) => { event.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const data = { username, password }; const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const result = await response.json(); console.log(result); }); </script> </body> </html> ``` 这里的HTML代码包含一个表单，其中包含用户名和密码字段以及一个提交按钮。当用户点击提交按钮时，JavaScript代码将捕获表单提交事件，阻止默认行为，并从表单中获取用户名和密码。然后，它将这些值作为JSON数据发送到服务器的'/login'路径。 Node.js服务器代码： ```javascript const express = require('express'); const app = express(); const port = 3000; app.use(express.json()); app.post('/login', (req, res) => { const { username, password } = req.body; // 在这里检查用户名和密码是否有效 // 如果有效，则返回一个JSON响应 // 如果无效，则返回一个错误响应 if (username === 'admin' && password === 'admin') { res.json({ success: true }); } else { res.status(401).json({ error: 'Invalid username or password' }); } }); app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); }); ``` 这里的Node.js代码使用Express框架来创建一个HTTP服务器。它使用中间件来解析JSON请求正文，并在'/login'路径上创建一个POST路由。当服务器接收到来自客户端的POST请求时，它从请求正文中提取用户名和密码，并检查它们是否有效。如果用户名和密码有效，则服务器将返回一个JSON响应，指示成功登录。如果无效，则服务器将返回一个错误响应，指示无效的用户名或密码。

阅读全文

script登录表单，数据传向nodejs

相关推荐

nodejs-mongodb-:使用Nodejs和mongodb数据库编写的登录注册小demo

nodejs 整合kindEditor实现图片上传

nodejs聊天室

nodejs异步上传

dataserver:一个简单的nodejs应用程序，用于测试表单中的JS

nodejs简单聊天室

nodejs的web安全示例代码|safety.zip

NodeJS本地上传文件至服务器

nodejs简单搭建前端后端网站demo

nodejs动态创建二维码的方法.docx

使用Nodejs+BootStrap搭建一个简单的留言板

node-chat-app:nodeJS中的聊天应用

nodejs之get/post请求的几种方式小结

Gexpress：适用于Google Appscript的Express中间件（构建类似NODEJS的应用程序）+生成的api-client

nodejs网页计算器

vue nodejs mysql登录注册 实现数据库登陆注册

使用nodejs,做一个mobi文件阅读网页

基于Matlab极化天线和目标之间的信号传输建模 matlab代码.rar

最新推荐

详解Nodejs get获取远程服务器接口数据

nodejs 简单实现动态html的方法

NodeJS使用formidable实现文件上传

nodejs 生成和导出 word的实例代码

nodejs搭建本地服务器轻松解决跨域问题

平尾装配工作平台运输支撑系统设计与应用

管理建模和仿真的文件

MATLAB遗传算法探索：寻找随机性与确定性的平衡艺术

如何在S7-200 SMART PLC中使用MB_Client指令实现Modbus TCP通信？请详细解释从连接建立到数据交换的完整步骤。

MAX-MIN Ant System：用MATLAB解决旅行商问题

vue nodejs mysql登录注册实现数据库登陆注册