Как отправить данные из React в Flask, а затем обратно, чтобы отреагировать и показать вывод в DOM

Question

Я пытаюсь передать данные из React -> Flask -> React и показать их в DOM.

До сих пор я мог:

• Отправить данные из React в Flask и отобразить вывод на консоли. (POST)
• Отправьте данные из flask в React и отобразите их в DOM (GET)

Итак, теперь я не понимаю, как мне собрать эти 2 вместе. Вот мой код React для отправки моих данных на Flask Имя пользователя. js (POST)

##REACT
class Content extends Component {
 login = (e) => {
        e.preventDefault();
        axios
            .post("/username", {
                username: document.getElementById("username").value,
            })
            .then((res) => {
                console.log( res.data);
            });
    };

    

  render() {
    return(

      <div className="p"> <User />

      <form onSubmit={this.login}>
                        <p>
                            <label htmlFor="email">Email</label>
                            <input
                                type="username"
                                className="w3-input w3-border"
                                id="username"
                            />
                        </p>
                        <p>
                            <button type="submit" className="w3-button w3-blue">
                                Login
                            </button>
                        </p>
                    </form>
                   
              </div>      

        
    );
  }
}

А вот как я получаю свои данные на flask

###FLASK
@app.route("/username", methods=['POST'])
def login():
    username = request.json["username"]
    #username = request.args.get('username')
    return {"username": 'This is the backend -- >'+ username }

Добавляя что-либо на свой ярлык ввода, я вижу это на консоли. Теперь я хочу получить результат, который я добавил во входные данные в DOM. Это может быть на другой странице?

Нужно ли мне создавать новый маршрут и передавать данные из / username? а затем выполнить вызов API в моем приложении для реагирования на этот новый маршрут? Как я могу передать этот вывод имени пользователя на другой маршрут? Это правильный способ сделать это?

Пожалуйста, посоветуйте, спасибо

Answer 1

из вашего внешнего кода кажется, что вы отправляете почтовый запрос типа: application / x- www-form-urlencoded, что это запрос по умолчанию для формы html5. В вашем backend logi c вы пытаетесь получить входящие данные как json со следующим кодом request.json["username"]. Вместо этого вы должны использовать request.form["username"] или request.form.get("username", "").

Вот небольшое резюме:

• request.args: пары ключ / значение в строке запроса URL

• request.form: пары ключ / значение в теле, из формы сообщения HTML или JavaScript запроса, который не кодируется JSON. Файлы: файлы в теле, которое Flask хранит отдельно от формы. HTML формы должны использовать enctype = multipart / form-data, иначе файлы не будут загружены.

• request.values: объединенные аргументы и форма, предпочитая аргументы, если ключи перекрывают запрос. json: проанализировано JSON данных. Запрос должен иметь тип содержимого application / json или использовать request.get_ json (force = True), чтобы игнорировать тип содержимого.

• request.files: файлы в теле, которое Flask отделено от формы. HTML формы должны использовать enctype = multipart / form-data, иначе файлы не будут выгружены.

• request.values: объединенные аргументы и форма, предпочитая аргументы, если ключи перекрываются

• request.json: проанализированы JSON данные. Запрос должен иметь тип содержимого application / json или использовать request.get_ json (force = True), чтобы игнорировать тип содержимого.

Ваше поле ввода во внешнем коде должен выглядеть так:

<form onSubmit={this.login} method="post">
    <p>
       <label htmlFor="email">Email</label>
       <input type="username" className="w3-input w3-border" id="username" name="username" />
   </p>
   <p>
      <input type="submit" className="w3-button w3-blue" value="Login" />
   </p>
</form>

Добавлены изменения:

• method="post": метод по умолчанию в форме html 5 - GET
• name="username": в качестве нового атрибута для ввода
• input type="submit": вместо кнопки

Ваша серверная часть должна быть такой:

@app.route("/username", methods=['POST'])
def login():
    username = request.form.get("username", "") # or request.form["username"]
    return jsonify(username=username) # from flask import jsonify 

Я советую вам использовать jsonify (), чтобы вернуть json данные.

Наконец, в вашем коде интерфейса, если вы хотите напечатать json ответ с собранным именем пользователя, следует обновить ваш код примерно так:

.post("/username", {
      username: document.getElementById("username").value,
})
.then((res) => {
     // JSON response is handled by a json() promises
     return res.json().then( (data) => console.log(data));
});