Ajax ile Flask-WTForms Kullanımı

Bir Flask uygulamasında, validasyon işlemleri için Flask-WTForms kullanmak çoğu zaman mantıklı olur. Bu tür işlemleri sunucu düzeyinde kolayca yapmak için WTForms, bulunmaz bir nimet. Ancak formu Ajax ile POST etmek istiyorsanız biraz kafanızın karışması normal. Bu yazıda, Ajax ile WTForms’un nasıl POST edileceğine değineceğiz.

Ajax ile Flask-WTForms Uygulaması

Öncelikle temel bir Flask uygulaması yaratalım ve adı app.py olsun.

ffrom flask import render_template, Flask, jsonify
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

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

class UserCreateForm(FlaskForm):
    name = StringField('Name')
    surname = StringField('Surname')
    submit = SubmitField('Submit')

@app.route('/create', methods = ['GET'])
def create():
    form = UserCreateForm()
    return render_template('create.html', form=form)

Daha sonra create.html dosyamızı oluşturalım ve aşağıdaki kodları dosyamıza ekleyelim.

<html>
    <html>
        <head>
            <title>Ajax ile WTForms Post İşlemi</title>
            <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        </head>
        <body>
            <form id="form" action="" method="POST">
                {{ form.hidden_tag() }}

                {{ form.name.label() }}<br>
                {{ form.name() }} <br><br>

                {{ form.surname.label() }}<br>
                {{ form.surname() }}<br><br>
                            
                {{ form.submit }} 
            </form>
        </body>
</html>

Şekilsiz şemalsiz de olsa formumuzu oluşturduk. Şimdi de app.py‘de formun gideceği rotayı tanımlayalım.

@app.route('/store', methods = ['POST'])
def store():
    form = UserCreateForm()
    if form.validate_on_submit():
        data = {'name': form.name.data, 'surname': form.surname.data} 
        return jsonify(data = data)
    return jsonify(data = form.errors)

Evet, validate işlemlerini yaptık. Jsonify ile göndereceğimiz veriyi JSON haline getirdik. Eğer validate error alırsak diye veriyi form.errors ile gönderdik. Geriye artık sadece bunu POST etmek kalıyor.

Not: Biz herhangi bir validator tanımlamadığımız için tabii ki bize bir form hatası dönmeyecektir. Siz test etmek için çeşitli validator’lar ekleyebilirsiniz.

<script>
    $(document).ready(function() {
        $('form').submit(function (e) {
            var url = "{{ url_for('store') }}";
            
            $.ajax({
                type: "POST",
                url: url,
                data: $('form').serialize(),
                success: function (data) {
                    console.log(data)
                }
            });
            e.preventDefault(); // Formun 'geleneksel' olarak gönderilmesini engeller.
        });
    });
</script>

Hepsi bu kadar! Tabii ki console.log() yerine toastr.js tarzı bildirim betiği de kullanabilirsiniz, bu kısım tamamen kişisel zevkinize kalmış.

Kolay gelsin! 🙂

Leave a comment