AJAX i Jinja2

Question

Chcę użyć wywołania AJAX z parametrami w ramach szablonu Jinja2. Ale jak mogę to zrobić? Chcę coś takiego zrobić.

JavaScript:

$.get("test.html", { name: "John", time: "2pm" }); 

jinja szablon:

<div> 
{{name}} {{time}} 
</div> 

Answer 1

Musisz uzyskać dostęp do obiektu żądania po stronie serwera, aby uzyskać argumenty. Zakładam, że używasz Flask, ale jeśli nie, podstawowa idea powinna być taka sama również w innych frameworkach internetowych. Powiedzmy, że masz prosty mały index.html, gdzie można użyć JavaScript, aby zapytanie Ajax:

$.get("{{ url_for('ajax') }}", {name: "John", time: "2pm"}); 

Należy pamiętać, że jeśli nie używasz Jinja2 renderować część skryptu, należy wymienić url_for() - połączenia z rzeczywistej zawartości, więc coś podobnego/ajax w moim przykładzie poniżej:

$.get("/ajax", {name: "John", time: "2pm"}); 

Teraz, po stronie serwera można mieć coś takiego:

from flask import Flask, render_template, request 

app = Flask(__name__) 

@app.route('/ajax') 
def ajax(): 

    #Access arguments via request.args 
    name = request.args.get('name') 
    time = request.args.get('time') 

    #NOTE: In real code, check that the arguments exist 

    #Silly logging call to show that arguments are there 
    app.logger.info(name) 
    app.logger.info(time) 

    #Do stuff here to do what you want or modify name/time 
    ... 

    #Render template and pass the arguments to it 
    return render_template('ajax.html', 
          name=name, 
          time=time) 

@app.route('/index') 
def index(): 
    return render_template('index.html') 

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

i ajax.html Wou ld wyglądać tak na przykład:

<h2>{{ name }}</h2> 
<h2>{{ time }}</h2> 

Więc request.args gdzie można uzyskać dostęp do argumentów przeszedłeś z GET, ale trzeba przekazać je bezpośrednio do Jinja2 z renderowanie_szablonu() rozmowy. Jinja2 jest po prostu szablonem i nie jest świadomy twoich argumentów (1), chyba że je przekażesz.

1) Z pewnymi wyjątkami. Flask na przykład przekazuje kilka argumentów niejawnie do Jinja2, tak jak obiekt żądania.

Answer 2

użyć jQuery aby zawartość div. Aby ułatwić korzystanie z przełączników elementów:

<div> 
    <span id="name">{{name}}</span> <span id="time">{{time}}</span> 
</div> 


name = $("#name").text() 
time = $("#time").text() 
$.get("test.html", {name : name, time : time});