AJAX và Jinja2

Question

Tôi muốn sử dụng cuộc gọi AJAX với tham số trong mẫu Jinja2. Nhưng làm sao tôi có thể làm được? Tôi muốn làm một cái gì đó như thế này.

JavaScript:

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

jinja mẫu:

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

Answer 1

Bạn cần truy cập đối tượng yêu cầu ở phía máy chủ để lấy đối số. Tôi giả sử bạn đang sử dụng Flask, nhưng nếu không, ý tưởng cơ bản sẽ giống nhau trên các khung công tác web khác. Hãy nói rằng bạn có một index.html chút đơn giản, nơi bạn sử dụng Javascript để thực hiện truy vấn Ajax của bạn:

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

Lưu ý rằng nếu bạn không sử dụng Jinja2 để làm cho phần kịch bản, thay thế url_for() - gọi với URL thực tế, do một cái gì đó giống như/ajax trong ví dụ của tôi thêm dưới đây:

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

Bây giờ, trên phía máy chủ, bạn sẽ có một cái gì đó như thế này:

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) 

và ajax.html wou ld nhìn một cái gì đó như thế này ví dụ:

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

Vì vậy request.args là nơi bạn có thể truy cập vào các đối số bạn đã vượt qua với GET, nhưng bạn cần phải vượt qua chúng một cách rõ ràng để Jinja2 với render_template() gọi. Jinja2 chỉ là một ngôn ngữ tạo khuôn mẫu và nó không nhận thức được các đối số của bạn (1) trừ khi bạn truyền chúng cho nó.

1) Với một số ngoại lệ. Flask ví dụ không truyền một vài đối số cho Jinja2 ngầm, giống như đối tượng yêu cầu.

Answer 2

Sử dụng jquery để có được nội dung của div. Để dễ dàng sử dụng công cụ chọn phần tử:

<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});