Блог

Главная - Вопросы по программированию - 400 ошибка при добавлении второй переменной в данные Ajax в приложении Flask

400 ошибка при добавлении второй переменной в данные Ajax в приложении Flask

#html #ajax #flask

Вопрос:

Я пытаюсь использовать Ajax для обработки форм в своем приложении Flask.

Вот код, который у меня сейчас есть:

Колба/Питон:

 @main.route('/reply/', methods=["GET", "POST"])
def reply():
    if request.method == "POST":

        reply = request.form['reply']
        reply_to_id = request.form['reply_to_id']
        

        if reply:
            now = datetime.now()
            formatted_date = now.strftime("%Y-%m-%d %X")
            reply_to_id = request.form.get("reply_to_id")
            blarg_db.replies.insert({"reply_to_id": reply_to_id, "username": current_user.username, "date": formatted_date, "reply": reply})

            return jsonify({'reply': reply})

    return redirect(url_for('main.home'))

АЯКС:

 $('.submit-reply').click(function(event) {

  var theReply = $(".reply-text").val()
  var replyToId = $(".reply_to_id").val()
  $.ajax({
    type : 'POST',
    url : '/reply/',
    dataType: "json",
    data : {'reply': theReply,
        'reply_to_id': replyToId},
  
    success : function(data){
      $("#reply-test").text(data['reply']);
    }
  
  })

  event.preventDefault();

});

HTML:

 <form action="{{ url_for('main.reply') }}" class="reply-form" style="display: none;" method="POST">
    <textarea class="reply-text" placeholder="What's your response to that?" name="reply-text"></textarea>

    <input type="text" value={{ request.url }} style="display: none;" name="current_url">

    <input type="text" class="reply_to_id" value={{ post["_id"] }} style="display: none;" name="reply_to_id">


    <button class="submit-reply" type="submit"> Submit </button>
</form>

Я продолжаю получать 400 плохих ошибок запроса с кодом как есть, но когда я удаляю вторую переменную в разделе данных моего кода AJAX, как в следующем примере, это работает:

 $('.submit-reply').click(function(event) {

  var theReply = $(".reply-text").val()
  var replyToId = $(".reply_to_id").val()
  console.log(replyToId)
  $.ajax({
    type : 'POST',
    url : '/reply/',
    dataType: "json",
    data : {'reply': theReply},
  
    success : function(data){
      $("#reply-test").text(data['reply']);
    }
  
  })

  event.preventDefault();

});

Как я могу добавить обе переменные в данные AJAX и избежать этой ошибки?

Ответ №1:

Я не понимаю, почему вторая переменная должна выдавать ошибку.
Поскольку я думаю, что вы могли бы упростить свой код, я приведу вам этот пример.

 from flask import Flask
from flask import jsonify, render_template, request
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def index():
    post = { '_id': 2021 } # example data
    return render_template('index.html', **locals())

@app.route('/reply', methods=['POST'])
def reply():
    reply = request.form['text']
    reply_to_id = request.form['id']
    dt = datetime.now().strftime('%Y-%m-%d %X')
    
    # ... your code here ...
    
    return jsonify({'reply': reply})

Я рекомендую использовать событие отправки формы.

Все данные формы сериализуются с использованием атрибутов имени, а затем передаются с помощью ajax. На стороне сервера значения, в свою очередь, могут быть запрошены с использованием имени.

Для подавления отображения определенных полей следует использовать поле типа «скрыто».

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form name="reply-form" method="post">
      <textarea name="text" placeholder="What's your response to that?"></textarea>
      <input name="url" type="hidden" value="{{ request.url }}" />
      <input name="id" type="hidden" value="{{ post['_id'] }}" />
      <button type="submit">Submit</button>
    </form>

    <script 
      src="https://code.jquery.com/jquery-3.6.0.min.js" 
      integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
      crossorigin="anonymous"
    ></script>
    <script type="text/javascript">
      (function() {
        $(document).ready(() => {
          $('form[name="reply-form"]').submit(function(event) {
            event.preventDefault();
            $.ajax({
              type: 'POST',
              url: '/reply',
              dataType: 'json',
              data: $(this).serialize()
            }).done((data) => {
              console.log(data);
            })
          });
        });
      })();
    </script>
  </body>
</html>

Таким образом, вы можете легко перенести все значения.

Метки: