【问题标题】:Flask render_template data send, process in jQuery [duplicate]烧瓶render_template数据发送,在jQuery中处理[重复]
【发布时间】: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 %}

【问题讨论】:

标签: python html jquery flask


【解决方案1】:

就像你通过 HTML 获取模板数据的方式一样,也适用于 JS:

var data_parsed = '{{ data }}'

【讨论】:

    猜你喜欢
    • 2020-08-15
    • 1970-01-01
    • 2014-07-16
    • 1970-01-01
    • 2017-09-22
    • 1970-01-01
    • 1970-01-01
    • 2014-07-23
    • 1970-01-01
    相关资源
    最近更新 更多