ajaxリクエストは、悪いjsonのためにフラスコで400エラーを返します

Ok !!私はフラスコのWebアプリケーションを構築しています、そして、私はいくつかのjsonデータを送るためにAjaxを使いたいです。ここに私のコードです！ htmlとjsの場合：ajaxリクエストは、悪いjsonのためにフラスコで400エラーを返します

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Check your Grades</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="{{ url_for('static', filename='js/bootstrap3-typeahead.min.js')}}"></script> 
     <script type="text/javascript" src="{{ url_for('static', filename='js/index.js')}}"></script> 
     <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}"> 
</head> 

<body> 
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
<form id="predict-form" method="POST"> 
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> 
    <p> welcome to grade predictor app,</p> 
    <p>Dear Plateform,</p> 
    <p>je viens 
    <label for="SCHOOL_RIGHT"> de </label> 
    <input class="typeahead" type="text" name="SCHOOL_RIGHT" id="SCHOOL_RIGHT" minlength="3" placeholder="(votre ecole de provenance)" data-provide="typeahead" autocomplete="off" required> et </p> 

    <p>dans 
    <label for="OPTION_RIGHT">l'option</label> 
    <input class="typeahead" 
     name="OPTION_RIGHT" id="OPTION_RIGHT" data-provide="typeahead" placeholder="(choisissez votre option)" required> 
    </p> 
    <p>j'ai obtenu 
    <label for="DIPPERC"></label> 
    <input type="number" name="DIPPERC" min="50" max="100" id="DIPPERC" placeholder="(Poucentage du 
    diplome)" required> % à l\'exetat 
    </p> 

    <p> 
    <button type="submit"> 
     <svg version="1.1" class="send-icn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="36px" viewBox="0 0 100 36" enable-background="new 0 0 100 36" xml:space="preserve"> 
     <path d="M100,0L100,0 M23.8,7.1L100,0L40.9,36l-4.7-7.5L22,34.8l-4-11L0,30.5L16.4,8.7l5.4,15L23,7L23.8,7.1z M16.8,20.4l-1.5-4.3 
    l-5.1,6.7L16.8,20.4z M34.4,25.4l-8.1-13.1L25,29.6L34.4,25.4z M35.2,13.2l8.1,13.1L70,9.9L35.2,13.2z" /> 
     </svg> 
     <small>send</small> 
    </button> 
    </p> 
</form> 
<script > 
var csrf_token = "{{ csrf_token() }}"; 
    // this will send a token each time before a session started 
    $.ajaxSetup({ 
     beforeSend: function(xhr, settings) { 
      if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) { 
       xhr.setRequestHeader("X-CSRFToken", csrf_token); 
      } 
     } 
    }); 
    //submit form data 
    $("form#predict-form").submit(function(e){ 
    console.log("form submitted") 
    e.preventDefault(); 
    var data = {} 
    var Form = this; 
    //Gathering the Data 
    //and removing undefined keys(buttons) 
    $.each(this.elements, function(i, v){ 
      var input = $(v); 
     data[input.attr("name")] = input.val(); 
     delete data["csrf_token"]; 
     delete data["undefined"]; 
    }); 
    data["DIPPERC"] = data["DIPPERC"]/100.0 
    //Form Validation goes here.... 
    //Save Form Data........ 
    $.ajax({ 
     cache: false, 
     url : "{{url_for('predict')}}", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     data : JSON.stringify(data), 
     success : function(callback){ 
      //Where $(this) => context == FORM 
        console.log("data sucessfuly submitted") 
        console.log(JSON.parse(callback)); 
     }, 
     error : function(){ 
      console.log('erroor') 
     } 
    }); 

    }) 
</script> 
</body> 
</html>

私は可能な限りすべて試しましたが、まだ400エラーが発生しました。関連するすべての質問はチェックしましたが、何も確認しませんでした。

しかし、私の研究では、400エラーがに従って、このによって引き起こされる可能性があることを示しています。HTTP 400不正な要求応答ステータスコードがあることを示し

：ことを言われていますhereから

サーバーは無効な構文のため要求を理解できませんでした。クライアントは変更を加えずにこの要求を繰り返すべきではありません。

CSRFトークン私はすでにトークンを追加しましたthisを逃し、そして（すでにそれを行いませんが、何も）が設定されていないcsrf.exempt何も
たContentTypeとapplicationTypeでルーティングするためにデータを送信しよう
すでに彼らが言う公式フラスコのドキュメントをチェックイン：
（から）私はこの問題を引き起こす可能性がどのように、正しいJSONデータに
を送っています？ここpredictions.route @私の単純なビュー機能

がある（ '/予測/予測/'、メソッド= [ 'GET'、 'POST']）デフ（予測）：
```
if request.method == 'POST': 
    print "hello----------------------" 
    print request.method 
    print request.get_json(force=True) 
return "done " 
```

私のテストで

注私は私のルートにパイソンを経由して直接データを送信するとき、それは、このコードで動作します：

def test_1_can_connect_post(self): 
     """ 

     Test API can create a (POST request) 

     """ 
     new_student = {'DIPPERC':0.60, 'SCHOOL_RIGHT':'itfm/bukavu', 'OPTION_RIGHT':'elec indust'} 


     res = self.client().post('predictions/predict/', data=json.dumps(new_student), content_type='application/json') 

     self.assertEqual(res.status_code, 201)

シモンズ：私は小さなことに欠けていることを確信しているが、何を知りません、何かが間違っているかもしれませんAjaxのansynchrous .....

出典

2017-09-06 Espoir Murhabazi

あなたは、文字列にデータを変換する必要はありません：JSON.stringifyを削除：

$.ajax({ 
    cache: false, 
    url : "{{url_for('predict')}}", 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    data : data, 
    success : function(callback){ 
     //Where $(this) => context == FORM 
       console.log("data sucessfuly submitted") 
       console.log(JSON.parse(callback)); 
    }, 
    error : function(){ 
     console.log('erroor') 
    } 
});

JSON.stringifyを使用すると、文字列を投稿してあなたは、文字列にデータを変換し、 JSONはありません。

出典

2017-09-06 19:32:13

すぐにお返事ありがとうございますが、変更しようとしましたが、何もしません！送信しているデータはjsonでエンコードする必要があるdictです –

[OK]を、デバッグの7日後に私はちょうど私の問題の解決策を見つけた：私は二つのことを実行します。今から

をし、私の将来のWeb開発のために私はjqueryのの使用を停止し、I 「はので、私のコードのために私はプレーンのJavaScriptを使用することを決定し、ここで私は、要求を送信するために使用するコードです、すぐに私はそのための十分な理由を見つけたと確信してメートル：

var csrf_token = "{{ csrf_token() }}"; 
// this will send a token each time before a session started 
var form = document.getElementById("predict-form"); 

form.onsubmit = function (e) { 
// stop the regular form submission 
e.preventDefault(); 

// collect the form data while iterating over the inputs 
var formEntries = new FormData(form).entries(); 
var data = Object.assign(...Array.from(formEntries, ([x,y]) => ({[x]:y}))); 
delete data["csrf_token"]; 
data["DIPPERC"] = data["DIPPERC"]/100.0 

console.log(data); 
// construct an HTTP request 
var xhr = new XMLHttpRequest(); 
xhr.open(form.method, form.action, true); 
xhr.setRequestHeader("X-CSRFToken", csrf_token); 
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
// send the collected data as JSON 
xhr.send(JSON.stringify(data)); 

xhr.onloadend = function() { 
console.log('blallala ') 
}; 
};

これがためでしたjavascriptの部分と私は私が

is_jsonフラスコ要求オブジェクトの属性のこれらの2行をフラスコ公式ドキュメントでhereを行ってい

私のサーバーへの良好なJSONオブジェクトを送信したことを確信していました：このリクエストがJSONかどうかを示します。デフォルトでは、mimetypeがapplication/jsonまたはapplication/* + jsonの場合、リクエストはJSONデータを含むとみなされます。
：

と

データ は、フラスコが

を処理し、これに私のバックエンドのコードを変更しないMIMEタイプに付属している場合には、文字列として入ってくる要求データが含まれています

@predictions.route('/predictions/predict/', methods=['GET', 'POST']) 
def predict(): 
    """ 

    the main methode use to predict 

    """ 
    if request.method == 'POST': 
     print "hello----------------------" 
     print request.is_json 
     print request.data 
     print '-----------------------------------------' 
    return "done "

そして、 VOILA !!!! 200のステータスコードとデータをPythonのdictとして取得します。

出典

2017-09-08 09:36:08

ajaxリクエストは、悪いjsonのためにフラスコで400エラーを返します

答えて

関連する問題