отправлять и получать данные из HTML и экспресс с использованием nodejs - PullRequest
Новая
       17

отправлять и получать данные из HTML и экспресс с использованием nodejs

1 голос
/ 07 марта 2019

У меня есть две страницы admin.hbs и gallery.hbs.Мне нужно сделать страницу галереи, нажав кнопку на странице администратора.Мне нужно отправить идентификатор div, кнопка присутствовала на странице администратора, чтобы выразить, используя javascript. Используя этот идентификатор, я пытаюсь сделать вызов конечной точке API, а затем я пытаюсь отобразить страницу галереи на основе ответа отконечная точка API в экспресс.

Есть ли другая альтернатива для отправки данных из html в экспресс?

Как отправить данные из html в экспресс, а затем отобразить страницу на основе данных, полученных из экспресс - вместо заполненияDiv?

Мне нужно получить идентификатор элемента div, кнопка которого присутствовала на странице администратора.Отправьте этот идентификатор на сервер (экспресс), сервер использует этот идентификатор для вызова конечной точки 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, чтобы выразить - это делается с помощью вызова 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, но как мне отобразить страницу в качестве ответа в экспрессе, потому что теперь результат передается в вызов выборки в виде простого текста вместо рендерингастраница в html?

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Ответ, возвращающийся к вызову fetch , сделанному из HTML, является естественным поведением вызова AJAX.

Я понимаю, что вы пытаетесь отобразить галерею страницы со своей текущей страницы. Я бы порекомендовал вам сделать что-то вроде этого:

HTML 

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

Таким образом, нажатие кнопки перенаправляет пользователя на создание страницы, которая отображает желаемый контент. Надеюсь, это поможет.

0 голосов
/ 07 марта 2019

Я думаю, что ваш код работает, в том смысле, что result является отображаемой HTML-страницей.Вы делаете вызов ajax, и ответом на этот вызов ajax является полная HTML-страница в виде текста.Но тогда он просто остается там, в памяти, ничего не делая.Вы можете console.log это и все.Но то, что вы хотите, это отобразить его в виде.

Для этого вы можете заполнить div полученным HTML, поэтому содержимое этого div является динамическим: $("someDiv").html(result)

...