所以我试图使用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>
#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"})
$(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('');
});
});
<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实时推送消息。
答案 0 :(得分:1)
HTTP 400告诉您您是missing a CSRF token。这用于验证通过表单或JS发送到服务器的数据。 Flask将其用于表单,除非您在Jinja模板中包含form.hidden_tag()
,否则该数据将不会得到验证。
我对您为什么在这里遇到错误感到有些困惑。据我所知,Flask默认不对AJAX请求强制实施CSRF令牌。而且您没有发送表单请求,对吗?您是否已导入CSRFProtect?如果是这样,那就是问题所在,发送AJAX请求时,您只需要在标头中包含该令牌即可。
顺便说一句,我想您可能打算在此处使用冒号:
return jsonify({"result", "success"})