HTTP Post Request только при перезагрузке веб-страницы - PullRequest
Новая
       23

HTTP Post Request только при перезагрузке веб-страницы

0 голосов
/ 09 июля 2020

Привет всем,

У меня есть простое приложение с кодировкой Angular9, в котором пользователь должен выбрать два элемента в двух отдельных раскрывающихся списках (selectedOption и selectedOption2), а затем выбрать вариант в списке переключателей (= selctedOption3). Я хотел бы собрать результаты формы радиокнопки и отправить их на мой Flask BackEnd.

Единственная проблема в том, что у меня проблемы с управлением методом публикации, мой метод Get работает отлично (собирает. json документ)

Вот мой Html код: 

<form class='form' method='POST'>
<mat-radio-group class="radio" [(ngModel)]='selectedOption3' name='test'>
  <mat-radio-button class="button" *ngFor="let data3 of getThirdkeys(Data[selectedOption][selectedOption2])"
    [value]='data3' name='test2'>
    <div class="data3">{{data3}} </div>
  </mat-radio-button>
</mat-radio-group>
</form>

В моем Angular основном компоненте у меня есть: 

export class AppComponent implements OnInit {

selectedOption = "";

selectedOption2 = "";

selectedOption3 = "";

Data : JSON;

private DRC_json = 'http://127.0.0.1:5100/drc_database.json';

private Images_DRC = 'http://127.0.0.1:5100/ReceiveImage';
constructor(private http : HttpClient) {}

ngOnInit () {

  this.http.get<JSON>(this.DRC_json).subscribe((data: JSON)=>{console.log(data); this.Data = data;});

  this.http.post<any>(this.Images_DRC,this.selectedOption3).subscribe();

}

И, наконец, мой код Flask: 

from flask import Flask, send_from_directory, request, send_file
from flask_cors import CORS
import os

app = Flask(__name__, template_folder='/GuideDRC/src')
CORS(app)

@app.route("/ReceiveImage", methods=['GET', 'POST'])
def Get_Image_DRC():
    print(request.method)
    if request.method == 'POST':
        Name_Image = request.data.decode('UTF-8')
        print(Name_Image)
        return '{}'.format(Name_Image)

app.run(debug=True, port=5100)

В сетевом мониторе Google Chrome я ясно вижу, что мой запрос Post инициализирован, но поскольку «SelectedOption3» сначала имеет значение null , он ничего не возвращает, но затем, когда я выбираю опцию из своих переключателей, ничего не происходит, и значение моего почтового запроса не обновляется! Что-то мне не хватает?

Спасибо за ваше время

1 Ответ

2 голосов
/ 09 июля 2020

почему бы не послушать изменение переключателя и не запустить HTTP-вызов 

<mat-radio-group class="radio" (change)="onChange($event)" [(ngModel)]='selectedOption3' name='test'>
 <mat-radio-button class="button"  *ngFor="let data3 of getThirdkeys(Data[selectedOption][selectedOption2])"
[value]='data3' name='test2'>
<div class="data3">{{data3}} </div>
 </mat-radio-button>
</mat-radio-group>

и в вашем ts-файле 

onChange(event) {
  this.http.post<any>(this.Images_DRC,this.selectedOption3).subscribe();
}
...