Как передать идентификатор элемента, на который нажал пользователь, обратно в Flask, используя AJAX - PullRequest
Новая
       14

Как передать идентификатор элемента, на который нажал пользователь, обратно в Flask, используя AJAX

0 голосов
/ 19 апреля 2020

Я пытаюсь работать на этом веб-сайте, который показывает список записей, и когда пользователь нажимает на одну из них, он переходит на другую страницу, на которой отображаются детали записи. Логика c, стоящая за ним, заключается в том, что каждый тег 'li' имеет уникальный атрибут "id", и я могу использовать этот идентификатор для вызова API и получения подробной информации для этой записи. Однако, похоже, что ничего не было передано обратно Flask ...

HTML код: 

<ul class="list-group list-group-flush">
  {%for i in range(0,length)%}
  <li class="list-group-item" id={{res.value[i].id}}>
    <h4 class="itemName">Name:{{res.value[i].name}}</h4>
    <p class="itemAssetType">{{res.value[i].assetTypes[0]}}</p>
    <p class="itemQualifiedName">{{res.value[i].qualifiedName}}</p>   
  </li>
  {%endfor%}
</ul>

JavaScript код: 

$(function(){
$('li').click(function(){
    var elementID = this.id
    var datatosend = JSON.stringify({"guid":elementID})
    $.ajax({
        url: '/details',
        data: datatosend,
        type: 'POST',
        success: function(response){
            window.location.href = '/details'
            console.log(response); //for stackoverflow: this shows None in console
        },
        error: function(ts) { alert(ts.responseText) }
    });
});

});

Flask код: 

@app.route('/details',methods=['POST','GET'])
def details():
    print (request.json) #this gives: None
    print (request.data) #this gives: b''
    print (request.args.get("guid")) #this gives: None
    return str(request.json)

Просто интересно, как мне передать этот идентификатор в flask ?? Почему всегда пусто ??? Я новичок в интерфейсе, любая помощь очень ценится.

1 Ответ

1 голос
/ 19 апреля 2020

Я думаю, что вы удалите эту часть 

success: function(response){
                window.location.href = '/details'
                console.log(response);
            }

, потому что вы получаете данные с сервера, а затем go другую страницу? но ваши данные все еще стоят на предыдущей странице! Вы должны оставаться на текущей странице и использовать свои данные следующим образом: 

  success: function(response){
                        console.log(response);
                    }


$(function () {
  $('li').click(function () {
    var elementID = this.id;
    console.log(this.id)//for stackoverflow: this shows the id as I expected
    $.ajax({
      url: '/details',
      data: { guid: this.id },
      type: 'POST',
      success: function (response) {
        console.log(response);
      },
      error: function (error) {
        console.log('failed');
        console.log(error);
        console.log('element id =======>',elementID)//it is work now!!!
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<li id="xyz">##click me##</li>

  <script src="app.js"></script>
...