【发布时间】:2020-09-28 04:15:05
【问题描述】:
如果我使用 Flask 通过服务器中的 render_template 发送数据,我如何在 jQuery 中访问它?我知道如何在 HTML 中做到这一点,但在 jQuery 中却不知道。我在下面尝试的代码不起作用;根本没有读取数据变量。我需要使用 jQuery,因为我需要使用 .append 函数来动态创建问题和答案的行。
服务器:
from flask import request, Flask, render_template, send_from_directory
from flask_sqlalchemy import SQLAlchemy
import requests
import json
import jsonpickle
app = Flask(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 1
app.config['SQLALCHEMY_DATABASE_URI']='sqlite:///site.db'
db = SQLAlchemy(app)
class Tests(db.Model):
id=db.Column(db.Integer, primary_key=True)
question=db.Column(db.String(200),unique=True)
answer = db.Column(db.String(200), unique=False)
hint = db.Column(db.String(2000), unique=False)
def __repr__(self):#Redefine what print(object) is
return '{} {}'.format(self.question,self.answer)
@app.route('/dutch_training/<no>',methods=['GET','POST'])
def dutch_training_les(no=0):
data=Tests.query.get((no,no+1,no+2))
return render_template("dutch_training.html",data=data)
dutch_training.html
{%extends "layout.html" %} {% block content %}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=0;
data_parsed=jQuery.parseJSON(data);
data_parsed.forEach(function(dt){
var link_to_example="https://context.reverso.net/vertaling/nederlands-engels/"+ dt['question'];
var link_to_hint = "/hint/" + dt['question']
$("#all_questions").append("<p>"+ dt['id'] +". " + dt['question'] + " " +
"<input id=\""+"question"+i+"\">" + "</input>" +
"<button style=\""+"height:20px;width:20px"+"\" type=\""+"radio"+"\" id=\""+i+"\">" + "</button>" +
'<a href="' + link_to_example + '">'+'Voorbeeldgebruik'+'</a>'+ '<br>' + '</br>' +
'<a href="' + link_to_hint + '">'+'Eigen Hint'+'</a>'+"</p>");
i++;
});
});
});
</script>
<section class="page-section" style="background-color:lightblue" id="about">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="inner" id="all_questions">
</div>
</div>
</div>
</div>
</section> {% endblock %}
【问题讨论】:
-
这个问题已经回答了。 stackoverflow.com/questions/11178426/…
-
JavaScript 在客户端执行,但您最初可以使用
var data = {{ data }}呈现数据