Question

我有两个页面admin.hbs和gallery.hbs。我需要通过单击管理页面上的按钮来呈现图库页面。我需要发送div在管理页面中存在按钮的div的ID，以使用javascript进行表达。使用该ID，我尝试调用api端点，然后根据来自的响应呈现图库页面Express中的api端点。

还有其他方法可以从html发送数据来表达吗？

我该如何从html发送数据进行表达，然后根据从Express接收的数据呈现页面-而不是填充div？

我基本上需要获取管理页面中存在按钮的div的ID。将该ID发送到服务器（快速），服务器使用该ID调用api端点并接收数据，并将该数据作为参数传递给使用hbs呈现图库页面

请在下面找到我的代码：

<!--Div of Admin page whose ID is to be sent to express -->
<div class="card-container wrapper">    
   <div class="row">
      {{#each albums}}
         <div class="col-md-4 mt-6 albums" id="{{this.id}}">
           <div class="card">  
              <img class="card-img-top" src="{{this.imagelink}}" alt="Card image cap">
              <div class="card-body text-center">
              <h4 class="card-title">{{this.albumtitle}}</h4>
              <p class="card-text span3">{{this.description}}</p>
               <button type="submit" class="btn btn-dark buttons">Add Pictures</button>
            </div>                           
           </div>
         </div>
       {{/each}}
   </div>
 </div>

在单击“添加图片”按钮时，我需要发送该特定div的ID来表达其使用ajax调用的完成。

   <script>       
    var buttons = document.getElementsByClassName('buttons');  
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {    
         console.log($(this).closest('div').parent().parent().attr("id"));   
         var url = "";
         let url="http://localhost:3000/create/"+$(this).closest('div').parent().parent().attr("id");
         fetch(url).then(response => response.json())
            .then( (result) => {
             console.log('success:', result)
                    })
            .catch(error => console.log('error:', error));    
        });}
    </script>

快递代码：

app.get('/create/:id', (req, res) => {

request({
    headers: { 'Authorization': 'Client-ID ' + 'xxxxx'},
    url:`https://api.imgur.com/3/account/xxxx/album/${id}`,
  },(error,response,body)=>{
     if(!error && response.statusCode=== 200){
           //console.log(JSON.parse(body));
           var images=JSON.parse(body).data.images;
           for(var i =0;i<images.length;i++){
           console.log(images[i].link);
           array.push({ imagelink : images[i].link});

          }
          //Render another page(gallery) based on the response from the api endpoint
          res.render('gallery' ,{title :result.albumtitle, description : result.decription, album:array})

        }else{
            console.log('Unable to fetch album info');
        }
    });

我能够从html获取ID，但是如何将页面呈现为express的响应，因为现在将结果作为纯文本传递给fetch调用，而不是在html中呈现页面？

Answer 1

在result 是呈现的HTML页面的意义上，我认为您的代码有效。您正在进行ajax调用，对此ajax调用的响应为完整的HTML页面，以文本形式显示。但是然后它只是停留在内存中，而不做任何事情。您可以console.log它和所有。但是，您想要在视图中呈现它。

为此，您可以使用接收到的HTML填充div，因此该div的内容是动态的：$("someDiv").html(result)

Answer 2

返回到从HTML进行 fetch 调用的响应是AJAX调用的自然行为。

我了解到您正在尝试从当前页面呈现图库页面。我建议您做这样的事情：

HTML

<button type="submit" onclick="location.href='http://localhost:3000/create/'+{{this.id}}" class="btn btn-dark buttons">Add Pictures</button>

通过这种方式，单击按钮可将用户重定向到创建呈现所需内容的页面。我希望这会有所帮助。

从html发送和接收数据，并使用nodejs表达

2 个答案: