从html发送和接收数据并使用节点js表达

Question

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

还有其他替代方法从html发送数据表达吗？

如何从html发送数据表达然后根据从express收到的数据呈现页面 - 而不是填充div？

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

请在下面找到我的代码：

<!--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获取调用的响应是AJAX调用的自然行为。

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

HTML

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

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