通过单击按钮调用 POST 方法答案

【问题标题】：Calling POST method by clicking a button通过单击按钮调用 POST 方法
【发布时间】：2019-02-28 17:01:21
【问题描述】：

这是我第一次设置服务器并需要帮助。所以我的目标是通过 NodeJS 和 Expresss 设置服务器。假设我们有一个包含管理员和用户的应用程序。当管理员点击一个按钮时，它会向服务器发送一些数据，然后用户可以获取数据。

这是我的服务器设置：

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port)

我可以添加一些 post 方法，比如说：

 app.post('/', (req, res) => ....);

所以我可以为listening POST 方法准备服务器响应，但我不知道如何通过单击按钮从我的应用程序发送一些数据（我的意思是calling 这个 post 方法）。我看了一堆教程，还没有看到任何真实世界的练习。

【问题讨论】：

标签： node.js http express server http-method

【解决方案1】：

要接收POST 参数，您需要body-parser 模块，您可以像这样将其包含在app.js 中，

var bodyParser = require('body-parser');
app.use(bodyParser.json());

以下是您如何接收通过POST 方法发送的表单字段，

app.post('/', function(req, res) {
    var someField1 = req.body.some_form_field;
    var someField1 = req.body.form_field1;
});

希望这会有所帮助！

【讨论】：

【解决方案2】：

在您的快递服务器上

var bodyParser = require('body-parser');
app.use(bodyParser.json());

app.post("/", (req,res) => {
    res.send("Hello");
});

在您的网页/应用程序上，您可以使用axios。假设您的快速服务器使用 localhost 和端口 4000 运行。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var instance = axios.create({
    baseURL: "http://localhost:4000" //use your express server's url(address) and port here
});

function onclick(){
    instance.post("/").then( response => {
        //response.data will have received data
    }
}
</script>

您可以使用此函数并在单击按钮时调用它

【讨论】：

我使用@david-r 的回复编辑了我的帖子。您将需要 body-parser 包来解析 post 请求。

【解决方案3】：

您可以像这样在 HTML 页面中简单地使用 jquery 来调用您的 api：

$("button").click(function(){
    $.post("/", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

并从您的 api 发送数据：

var bodyParser = require('body-parser'); 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/', function(req, res) {
var obj = {};
obj.name="hello";
obj.lname="world" 
res.json(obj);
});

【讨论】：

【解决方案4】：

例子：

HTML： 您的表单元素应该有名称（这是强制性的）才能在帖子正文请求中访问这些元素。

<form method="post" action="/">
    <input type="text" name="Name" />
    <br>
    <input type="text" name="Telephone" />
    <br>
    <input type="submit" />
 </form>

app.js

const express = require('express')
const app = express()
const port = 3000
var bodyParser = require('body-parser');
app.use(bodyParser.json());

app.post('/', (req, res) => {
    name = req.body.Name;
    telephone = req.body.Telephone;

    res.render('somefolder/index', {
       name: name,
       telephone: telephone,
    });
    // Above code is for reference if you want to load another page after post complete and get posted values in this page too.
    res.end();

});

【讨论】：