Flaskフォームを検証してJavaScript配列を同時に渡します

JavaScript値を渡して同じビューのフォームを同時に検証するにはどうすればよいですか？あなたは1つの値 "X"を$.ajax({data: X})に渡すことしかできないので、私はdata:に辞書を渡すことができますが、それは$('form').serialize()を評価しません。今私は$.ajax({})フォームの検証を処理し、$.post()はFlaskビューにJavaScript配列を渡すためにあります。検証はTrueですが、jsArrayは決して送信されません！私は行方不明で何ですか？Flaskフォームを検証してJavaScript配列を同時に渡します

index.htmlを

{% from '_formhelpers.html' import render_field %} 
<form> 
    {{ form.hidden_tag() }} 
    {{ render_field(form.first_name)}} 
    {{ render_field(form.last_name) }} 
    <button id='submit-btn'>submit</button> 
</form> 
<script> 
    var jsArray = JSON.stringify([{'item1': 'value1'}, {'item2': 'value2'}]); 
    $('#submit-btn').click(function(event) { 

    $.post(url: '/', data:jsArray, mimetype: 'application/json', success: function(){alert('data post success')}); 
    $.ajax({ 
     type: 'POST', 
     url: '/', 
     data: $('form').serialize(), 
     success: function(data) { 
     window.location.replace('/success'); 
     } 
    }); 
    event.preventDefault(); 
    }); 
</script>

test.py

from flask import Flask, render_template, request, url_for 
from flask_wtf import FlaskForm 
from wtforms import StringField 
from wtforms.validators import DataRequired 


app = Flask(__name__) 
app.secret_key = 'mysecretkey' 


class MyForm(FlaskForm): 
    first_name = StringField('first name', validators=[DataRequired('please enter your name')]) 
    lasthttps://stackoverflow.com/_name = StringField('last name', validators=[DataRequired()]) 


@app.route('/', methods=['POST', 'GET']) 
def index(): 
    form = MyForm(request.form) 
    if request.method == 'POST' and form.validate(): 
     data = request.get_json() 
     print(data) # >>> None 
     # i am handling the return in the AJAX success function. 
    return render_template('index.html', form=form) 

@app.route('/success') 
def success(): 
    return 'success!'

ここ_formhelpers.html

{% macro render_field(field) %} 
    <dt>{{ field.label }} 
    <dd>{{ field(**kwargs)|safe }} 
    {% if field.errors %} 
    <ul class='error'> 
     {% for error in field.errors %} 
     <li>{{ error }}</li> 
     {% endfor %} 
    </ul> 
    {% endif %} 
    </dd> 
{% endmacro %}

出典

2017-11-04 belle

は、実施例でうまくいけば、正確に何をしたいん。

test.py

from flask import render_template, Flask, jsonify 
from flask_wtf import FlaskForm 
from wtforms import StringField 
from wtforms.validators import DataRequired 

app = Flask(__name__) 
app.secret_key = 'example' 

class MyForm(FlaskForm): 
    first_name = StringField('first name', validators=[DataRequired('please enter your name')]) 
    last_name = StringField('last name', validators=[DataRequired()]) 

@app.route('/') 
def home(): 
    form = MyForm() 
    return render_template('example.html', form=form) 

@app.route('/something/', methods=['post']) 
def something(): 
    form = MyForm() 
    if form.validate_on_submit(): 
     return jsonify(data={'message': 'hello {}'.format(form.first_name.data)}) 
    return jsonify(data=form.errors) 

if __name__ == '__main__': 
    app.run(debug=True)

example.html

{% from '_formhelpers.html' import render_field %} 
<!DOCTYPE html> 
<html> 
    <head> 
     <title>Example Post AJAX Out get JSON Back</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script> 
     $(document).ready(function() { 
      $('form').submit(function (e) { 
       var url = "{{ url_for('something') }}"; // send the form data here. 
       $.ajax({ 
        type: "POST", 
        url: url, 
        data: $('form').serialize(), // serializes the form's elements. 
        success: function (data) { 
         console.log(data) // display the returned data in the console. 
        } 
       }); 
       e.preventDefault(); // block the traditional submission of the form. 
      }); 
      // Inject our CSRF token into our AJAX request. 
      $.ajaxSetup({ 
       beforeSend: function(xhr, settings) { 
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) { 
         xhr.setRequestHeader("X-CSRFToken", "{{ form.csrf_token._value() }}") 
        } 
       } 
      }) 
     }); 
     </script> 
    </head> 

    <body> 
     <form id="foo"> 
      {{ form.hidden_tag() }} 
      {{ render_field(form.first_name)}} 
      {{ render_field(form.last_name) }} 
      <input type="submit" value="Submit"/> 
     </form> 
    </body> 
</html>

検証は、我々は全体form.errors辞書を返送失敗した場合。

出典

2017-11-04 19:01:40 Erdem

ありがとうございました。 'data'が' None'の理由を知っていますか？ – belle

mimetypeを 'application/json'に設定すると、これは解析されたデータを含みます。それ以外の場合はNoneになります。 [フラスコのドキュメントによる]（https://flask.readthedocs.io/en/latest/api/#flask.Request.json） – Erdem

私のコードは 'form.validate（）== True'と' data = {'item1'： 'value1'}、{'item2'： 'value2'}] 'あなたのために？ – belle

Flaskフォームを検証してJavaScript配列を同時に渡します

答えて

関連する問題