Ajax

Ajax je technologie pro vývoj interaktivních webových aplikací, které mění svůj obsah bez nutnosti jejich kompletního znovunačítání za pomoci asynchronního zpracování webových stránek pomocí knihovny napsané v JavaScriptu. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, na druhou stranu ke správné funkci potřebují moderní webové prohlížeče.

Ajax přidáváme do route ve Flasku Javaskriptem. Například, kdybychom chtěli do route přidat tlačítko Delete Student, udělali bychom to takto:

@app.route("/_delete_student")
def delete_student():
    student_id = request.form.get("student_id")
    cur = mysql.connection.cursor()
    cur.execute("DELETE FROM students WHERE student_id = %s", (student_id,)
    conn.commit()
    return jsonify(status="success")

V javaskriptu, který bude Ajax spouštět, bychom měli něco podobného tomuto:

$("#delete_student").click(function(){
    $.ajax({
      type: 'POST',
      url: "/_delete_student",
      data: {student_id: 1},
      dataType: "text",
      success: function(data){
                 alert("Deleted Student ID "+ student_id.toString());
               }
    });
});

Další příklad, kód ve Flesku:

@mod.route('/load_ajax', methods=["GET", "POST"])
def load_ajax():
    if request.method == "POST":
        return str(request.form['json_str']

A kód v Javascriptu a Ajax by vypadal takto:

$('#clickme').click( function() {
    var data = save_input(); // data

    $.ajax({
            type : "POST",
            url : "{{ url_for('mod.load_ajax') }}",
            data: {json_str: JSON.stringify(data)},
            contentType: 'application/json;charset=UTF-8',
            success: function(result) {
                console.log(result);
            }
          });
    console.log(data);
});