将数据从EJS中的Span发送到服务器Nodejs

Question

使用Nodejs、Express、EJS

我看到很多"从服务器到客户端发送数据"，但不是从客户端到服务器和从标记而不是从表单输入发送数据。

我想将标签的内容从我的ejs页面/客户端发送到我的nodejs/服务器。

我在努力。。。page.ejs

<div>
<form action="/brewery" method="GET">
<div class="form-group">
<input type="text" class="form-control" 
placeholder="search brewery name" 
name="search">
</div>
<input class="button" type="submit" value="Submit">
</form>
</div>
<div> 
<ul>
<% searchBreweryList.forEach(function(searchBrewery){ %>
<div>
<li>
Brewery Name: <span><%= searchBrewery.brewery.brewery_name %></span>
Brewery ID: <span name="brewID" id="shareBreweryID"><%= searchBrewery.brewery.brewery_id %></span>
</li>
</div>
<% }) %>
</ul>
</div>

然后在我的服务器端。。。server.js

app.get('/brewery', async (req, res) => {
var searchBreweryFound = req.query.search; 
var isIndie = req.params.brewID
//console.log(isIndie)
//console.log(searchBreweryFound)
try {
request("https://api.com/v4/search/brewery?access_token=abc123&limit=1&q=" + searchBreweryFound, function (error, response, body) 
{
if (error) throw new Error(error);
const searchBrewery = JSON.parse(body);
const searchBreweryList = searchBrewery.response.brewery.items.map(item => item );

res.render('brewery.ejs', {searchBreweryList}); 
//console.log(searchBreweryList);
});   
} catch(e) {
console.log("Something went wrong", e)
}
});

因此，上面的Get调用只是一个示例，我试图在客户端跨度中获得类似<span name="brewID">的结果。然后，我试图将该ID号提供给var中的服务器，该var被视为var isIndie = req.params.brewID。但这似乎并不是一种允许我将内容从客户端中的跨度传递到服务器的方法。我应该采取什么方法？谢谢

Answer 1

不清楚你说的"从客户端向服务器发送数据"；。从客户端向服务器发送数据的标准方法是在*.js文件中使用XMLHttpRequest(XHR(，但根据您的代码，您需要使用一些参数将浏览器窗口重定向到URL。当浏览器到达您的端点时，例如/brewery，服务器将呈现*.ejs文件并用HTML代码响应浏览器。

使用EJS重定向浏览器

以下代码基于您发布的代码。

<div>
<ul>
<% searchBreweryList.forEach(function(searchBrewery){ %>
<div>
<li>
Brewery Name: <span>
<%= searchBrewery.brewery.brewery_name %>
</span>
Brewery ID: <span name="brewID" id="shareBreweryID">
<%= searchBrewery.brewery.brewery_id %>
</span>
<!-- Here we create link using parameter of brewery (version with param) -->
<a href="<%= '/brewery/' + searchBrewery.brewery.brewery_id %>">Go to brewery</a>
<!-- Version with query param -->
<a href="<%= '/brewery?id=' + searchBrewery.brewery.brewery_id %>">Go to brewery</a>
</li>
</div>
<% }) %>
</ul>
</div>

单击Go to brewery后，浏览器将使用参数brewery_id访问/brewery端点。我还注意到，在发布的示例中，var isIndie = req.params.brewID可能不起作用。

奖金：req.queryvsreq.params

CCD_ 10和CCD_。而CCD_ 12和CCD_。

使用req.query

对于端点：/brewery?id=5&q=test

const id = req.query.id // 5
const q = req.query.q   // 'test'

使用req.params

若要使用req-params，您必须将param名称放在express端点的url中的某个位置。

app.get('/brewery/:id', async (req, res) => {
var id = req.params.id
})

因此，以req.params工作为例：

app.get('/brewery/:brewID', async (req, res) => {
var searchBreweryFound = req.query.search; 
var isIndie = req.params.brewID
// Rest of your code
})