2014-04-04 9 views
12

작은 플라스크 기반 사이트를 작성 중이며 Ajax를 사용하여 클라이언트에서 서버로 데이터를 보내고 싶습니다. 지금까지는 Ajax 요청 만 사용하여 서버에서 데이터를 검색했습니다. 이번에는 POST 요청을 통해 데이터를 제출하고 싶습니다.Flask 및 Ajax Post 요청 400

@app.route("/json_submit", methods=["POST"]) 
def submit_handler(): 
    # a = request.get_json(force=True) 
    app.logger.log("json_submit") 
    return {} 

Ajax 요청을 제출 플라스크 나 제공 :

는 I 간신히이 경로의 구현 내에서 불필요한 에러를 방지하기 위해 메시지를 기록하도록 감소 플라스크 측 수신기 400 오류

127.0.0.1 - - [03/Apr/2014 09:18:50] "POST /json_submit HTTP/1.1" 400 - 

는 또한

왜 플라스크,972,867를 호출하지 않는 브라우저에서 웹 개발자 콘솔에서 볼 수 있습니다요청에 제공된 데이터가 있습니까? 코드가 딕셔너리 객체를 반환에서

var request = $.ajax({ 
    url: "/json_submit", 
    type: "POST", 
    data: { 
     id: id, 
     known: is_known 
    }, 
    dataType: "json", 
    }) 
    .done(function (request) { 
    }) 
+2

우연히 Flask-WTF의 CSRF 보호 기능을 사용하고 있습니까? AJAX 요청에 CSRF 토큰을 포함시키지 않으면 400 오류로 응답합니다. –

+0

이 용액이었다."받아 들인 대답"에 열렬한 사람이라면 나는 그것을 올리겠습니다.) – wirrbel

+1

나는 그 대답을 적절한 대답으로 확장했습니다. :-) –

답변

21

같은 JSON을 반환합니다.

면제는 장식으로 수행됩니다

@csrf.exempt 
@app.route("/json_submit", methods=["POST"]) 
def submit_handler(): 
    # a = request.get_json(force=True) 
    app.logger.log("json_submit") 
    return {} 

는 AJAX 요청과 토큰을 포함 어딘가 페이지에 토큰을 보간하기 위해; <meta> 헤더 또는 생성 된 JavaScript에서 X-CSRFToken 헤더를 설정하십시오. jQuery를 사용할 때는 ajaxSetup hook을 사용하십시오.

<meta name="csrf-token" content="{{ csrf_token() }}"> 

어딘가에 당신의 JS 코드 : 메타 태그 (플라스크-WTF CSRF 문서에서)를 사용하여

var csrftoken = $('meta[name=csrf-token]').attr('content') 

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) { 
      xhr.setRequestHeader("X-CSRFToken", csrftoken) 
     } 
    } 
}) 

실제로 아직 JSON 데이터를 게시하지 않습니다 핸들러 ; 그것은 여전히 ​​정규 URL 인코딩 POST입니다 (데이터는 Flask 측에서 request.form으로 끝납니다).

var request = $.ajax({ 
    url: "/json_submit", 
    type: "POST", 
    contentType: "application/json", 
    data: JSON.stringify({ 
    id: id, 
    known: is_known 
    }), 
}) 
    .done(function (request) { 
}) 

이제 데이터가 request.get_json() method와 파이썬 구조로 액세스 할 수 있습니다 : 당신은 application/json에 AJAX 콘텐츠 형식을 설정하고 실제로 JSON을 제출 JSON.stringify()를 사용해야 할 것입니다.

JSON보기 반환 (예를 들어, 당신은 JSON 응답을 생산하는 flask.json.jsonify()을 사용) 할 때 $.ajaxdataType: "json", 매개 변수에만 필요합니다. jQuery는 응답 처리 방법을 알 수 있습니다.

+1

거룩한 몰리,이 대답의 첫 번째 문장을 주셔서 감사합니다. @csrf.exempt'를 사용하여 하나의보기 (기본 양식)를 면제했지만 AJAX를 통해 호출 된 내 '업로드'보기에 동일한 데코레이터를 추가하는 것을 잊어 버렸습니다. 첫 문장을 읽고 어떻게 든 전구를 껐다. :) – sofly

+1

고마워! 나 좀 도와 줘. – sudoz

+1

이렇게하면 많이 도움이되었습니다. 바로 가리 킵니다. +1을 통해 데이터를 다시 보내는 방법을 포함합니다. – tver3305

1

당신은, 그 전에이

var request = $.ajax({ 
    url: "/json_submit", 
    type: "POST", 
    contentType: "application/json", 
    data: JSON.stringify({ 
     id: id, 
     known: is_known 
    }), 
    dataType: "json", 
    }) 
    .done(function (request) { 
}) 

같은 시도 할 수 있습니다. 그건 맞지 않아. 당신이이 Flask-WTF CSRF protection 당신이보기를 면제하거나 필요하거나 너무 당신의 AJAX POST 요청에 CSRF 토큰을 포함 할 수 있습니다 사용하는 경우는

@app.route("/json_submit", methods=["POST"]) 
def submit_handler(): 
    # a = request.get_json(force=True) 
    app.logger.log("json_submit") 
    return flask.jsonify({'msg': 'success'})