如何使用flask和jquery修复此问题? HTTP400:错误请求-由于语法无效,服务器无法处理该请求

时间:2019-06-13 21:02:50

标签: javascript python jquery html flask

所以我试图使用Ajax和flask将一些jquery数据从前端发送到后端,但是我一直收到此错误,但是我所有其他代码都正常工作

我尝试使用类型:“ POST”和$ .post尝试发送数据,但运气不佳。我也尝试使用request.form和request.get_json(),仍然没有运气。

我尝试在邮递员中进行快速测试,结果告诉了我。我正在尝试运行POST请求。

邮递员的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<title>400 Bad Request</title>
<h1>Bad Request</h1>
<p>The CSRF token is missing.</p>

Python Flask

#all other code is fine...

@users.route('/api/get_msg') #Both users can communicate
def get_msg():
    text = Messages.query.all()
    users = Users.query.all()
    return jsonify([
    {
        "msg": text[m].message,
        "user": text[m].sender.username
    }
    for m in range(len(text))
])

@users.route('/api/send_msg', methods=['POST'])
def send_msg():
    data = request.get_json()
    from_user = current_user
    msg_text = data["msg_text"]
    newMsg = {
    "msg_text": msg_text
    }
    msg_log = Message(message=msg_text, sender=from_user)
    db.session.add(msg_log)
    db.session.commit()
    return jsonify({"result", "success"})

Javascript


 $(function() {
    var $msg_history = $('#messages');
    var $msg_text = $('input #msg_text');
    let $username = $('#current_user_id').data();
    let $other_user = $('#to_send_user_1').data();

    function incoming(text){
      $msg_history.append(`
        <div class="incoming_msg">
          <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
          <div class="received_msg">
            <div class="received_withd_msg">
            <p><strong>${text.user}</strong>: ${text.msg}</p>
              <span class="time_date">16:09 |   Today</span></div>
          </div>
        </div>
        `);
    }

    function outgoing(text){
      $msg_history.append(`
        <div class="outgoing_msg">
          <div class="sent_msg">
            <p>${text}</p>
            <span class="time_date"> 11:00am </span> </div>
        </div>
        `);
    }

    $.ajax({
      type: 'GET',
      url: '/api/get_msg',
      success: function(data){
        $.each(data, function(i, msgs){
            incoming(msgs);
        });
      },
      error: function(){
        alert('ERROR: Could not load messages. Please try to reconnect.')
      }
    });

// SEND MSG
    var $sendBtn = $('#send_btn');
    var $msg_text = $('#msg_text');

    $sendBtn.on('click', function(event){
      event.preventDefault();
      $.ajax({
        type: 'POST',
        url: '/api/send_msg',
        data: {
          "msg_text": $msg_text.val()
        }
      })
      .done(function(data){
        if (data.error){
          outgoing('Could Not Send');
        }
        else{
          outgoing($msg_text.val());
        }
      });
      $msg_text.val('');
    });
});

HTML或通过Jinja2制作的模板

<div class="mesgs">
          <div class="msg_history" id="messages">
           <!-- Some other Code-->
          </div>

          <div class="type_msg" id="messageInput">
            <div class="input_msg_write">
              <input type="text" class="write_msg" id="msg_text" name="msg_text" placeholder="Type a message" />
              <button class="msg_send_btn" id="send_btn" type="button">Send</button>
              </div>
          </div>
</div>

我正在尝试让后端将消息保存到数据库中,然后通过get请求将其发送回前端。就像聊天应用一样。

我还试图找到使用flask和jquery创建即时聊天应用程序的最佳方法。如果有人有什么建议。请告诉我。我已经在使用pusher实时推送消息。

1 个答案:

答案 0 :(得分:1)

HTTP 400告诉您您是missing a CSRF token。这用于验证通过表单或JS发送到服务器的数据。 Flask将其用于表单,除非您在Jinja模板中包含form.hidden_tag(),否则该数据将不会得到验证。

我对您为什么在这里遇到错误感到有些困惑。据我所知,Flask默认不对AJAX请求强制实施CSRF令牌。而且您没有发送表单请求,对吗?您是否已导入CSRFProtect?如果是这样,那就是问题所在,发送AJAX请求时,您只需要在标头中包含该令牌即可。

顺便说一句,我想您可能打算在此处使用冒号:

return jsonify({"result", "success"})