將數據從 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 isIndie = req.params.brewID中的服務器。 但這似乎不是一種允許我將內容從客戶端跨度傳遞到服務器的方法。 我應該采取什么方法？ 謝謝！

Answer 1

目前尚不清楚“將數據從客戶端發送到服務器”是什么意思。 從客戶端向服務器發送數據的標准方法是在 *.js 文件中使用 XMLHttpRequest (XHR)，但根據您的代碼，您希望使用一些參數將瀏覽器 window 重定向到 ZE6B391A8D2C4D45902A23A8B658570。 當瀏覽器訪問您的端點時，例如/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.query與req.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 參數，您必須將參數名稱放在快速端點的 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
})