一个微信小程序+node.js实现表单提交并回显表单信息的代码示例
时间: 2024-02-06 12:02:07 浏览: 42
以下是一个简单的微信小程序 node.js 实现表单提交并回显表单信息的代码示例:
前端代码:
<view class="container">
<form bindsubmit="submitForm">
<input name="name" placeholder="请输入姓名" />
<input name="age" placeholder="请输入年龄" />
<button form-type="submit">提交</button>
</form>
<view wx:if="{{formData}}">
<text>姓名:{{formData.name}}</text>
<text>年龄:{{formData.age}}</text>
</view>
</view>
后端代码:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.post('/submitForm', (req, res) => {
const formData = req.body;
console.log(formData);
res.send(formData);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
当用户在前端页面输入姓名和年龄后点击提交按钮,前端会将表单数据通过 POST 请求发送到后端的 /submitForm 路由。后端收到请求后会将表单数据打印到控制台,并将数据返回给前端。前端收到后端返回的数据后会将表单数据回显到页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)