node.js实现form表单提交(POST)

提交表单:

  • html结构如下:指定端口7777
<form method="post" action="http://localhost:7777">         
	<input type="text" placeholder="Username" name="user">            
	<input type="password" placeholder="Password" name="pwd">
	<input type="submit" class="submit" value="提交">
	</input>
</form>

获取 POST 请求内容

  • 创建一个http服务用来接收和响应客户端提交的数据,监听端口7777
var http=require("http")
var url=require("url")
var querystring=require("querystring")//需要下包
var fs=require("fs")

http.createServer(function(req,res){
    //post
    var reqBody='';
    // 通过req的data事件监听函数,每当接受到请求体的数据,就累加到post变量
    req.on('data',function (data) {
        reqBody += data;
    });
    // 在end事件触发后,通过querystring.parse将post解析为真正的POST请求格式,然后向客户端返回。
    req.on('end',function () {//用于数据接收完成后再获取
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write('you have sent a '+req.method+' request\n');
        res.write('<p>Content-Type:'+req.headers['content-type']+'</p>'
            +'<p>Data:your name is '+querystring.parse(reqBody).user+'</p>'
            +'<p>Data:your password is  '+ querystring.parse(reqBody).pwd+'</p>');

        res.end();
    })

}).listen(7777)


提交界面:

在这里插入图片描述

返回数据:

在这里插入图片描述


参考:菜鸟教程

以下是一个微信小程序 node.js 实现表单提交的例子: 1. 创建一个 Express 应用程序 安装 Express 模块: ``` npm install express --save ``` 创建一个 index.js 文件,写入以下代码: ``` const express = require('express'); const app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.post('/submit', (req, res) => { const name = req.body.name; const email = req.body.email; console.log(`Received form submission: ${name} (${email})`); res.send('Form submission received!'); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 2. 创建一个微信小程序页面 在微信开发者工具中创建一个新页面,例如 submitForm。 在 submitForm 页面的 wxml 文件中添加一个表单: ``` <view class="container"> <form bindsubmit="onFormSubmit"> <input type="text" name="name" placeholder="Name" /> <input type="email" name="email" placeholder="Email" /> <button type="submit">Submit</button> </form> </view> ``` 在 submitForm 页面的 js 文件中添加以下代码: ``` Page({ onFormSubmit(event) { const name = event.detail.value.name; const email = event.detail.value.email; wx.request({ url: 'http://localhost:3000/submit', method: 'POST', data: { name: name, email: email }, success(res) { console.log(res.data); } }); } }); ``` 注意,这里的请求地址应该是你的 Express 应用程序所在的服务器地址。 3. 运行应用程序 在命令行中运行以下命令启动 Express 应用程序: ``` node index.js ``` 在微信开发者工具中启动小程序,访问 submitForm 页面,填写表单并提交。在控制台中可以看到表单提交的日志信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值