时间戳

首页 > 解决方案 > 将数据从 EJS 中的 Span 发送到服务器 Nodejs

node.js - 将数据从 EJS 中的 Span 发送到服务器 Nodejs

问题描述

使用 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 isIndie = req.params.brewID. 但这似乎不是一种允许我将内容从客户端跨度传递到服务器的方法。我应该采取什么方法？谢谢！

标签： node.jsexpressejs

解决方案

目前尚不清楚“将数据从客户端发送到服务器”是什么意思。从客户端向服务器发送数据的标准方法是在 *.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>

单击浏览器后，将使用 paramGo to brewery命中端点。我还注意到在发布的示例中可能不起作用。/brewerybrewery_idvar isIndie = req.params.brewID

奖金：req.queryvsreq.params

两者req.query和req.params都用于从端点 URL 获取一些信息。然而req.query和req.params不一样。

使用 req.query

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

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

使用 req.params

要使用 req 参数，您必须将参数名称放在 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
})

推荐阅读