Question

尝试使用AJAX对数据表进行分页。我创建了一个SQLAlchemy查询，它接受用户输入，并从那里我创建了一个字典列表，其中包含查询的每个结果。我需要使我的数据JSON可序列化，并且我尝试使用this JavaScript tool，但它说我的查询对象（models.py中的变量“select”）不可序列化。我尝试使用标题为“行”的词典列表，但我的每个查询都太大而无法存储在烧瓶“session”对象中（如views.py中所示）。

我知道SQLAlchemy的paginate函数，但我不确定这是否是实现我的表的分页功能的最佳方法。我想使用AJAX（你可以使用sqlalchemy的paginate函数和AJAX结合吗？），但我是JS的初学者，不知道如何完成AJAX实现。有什么帮助吗？

到目前为止，我的代码细分了。我不认为发布表模式是必要的，但请注意我通过创建类并将自动加载转为True来加载现有表。每个查询中都有日期时间对象，所以也许这就是查询对象不是JSON可序列化的原因？

models.py:

class Stations(Base):
    __tablename__ = "stations"
    __table_args__ = {'autoload':True}

class Metar(Base):
    __tablename__ = "metar"
    __table_args__ = {'autoload':True}

def loadSession(form):
    clear_mappers()
    metadata = MetaData()
    metadata.reflect(engine, only=['metar', 'stations'])
    stations = Table('stations', metadata, \
                  Column('stationID', Integer, \
                    ForeignKey("metar.stationID"), primary_key=True), \
                    autoload=True, autoload_with=engine, extend_existing=True)
    mapper(Stations, stations)
    metar = Table('metar', metadata, autoload=True, autoload_with=engine)
    mapper(Metar, metar)

    Session = sessionmaker(bind=engine)
    connect = Session()

    queries = []
    #
    # Code not pertinent to question
    # takes user input query params and enters them into query

    time_constraints = []
    #
    # Code not pertinent to question
    # takes user input query params and enters them into query

    # creates sqlalchemy query object
    select = connect.query(Metar.stationID, Metar.ldatetime, Metar.temp, Metar.dew,
                            Metar.wspd, Metar.wdir, Metar.wgust, Metar.vrb,
                            Stations.id, Stations.name, Stations.state).\
                        join(Stations).\
                        filter(or_(*queries), and_(*time_constraints))

    # creates list of dicts containing query response information
    rows = []
    for result in select:
        rows.append(dict(zip(result.keys(), result)))

    return rows, select

views.py

@app.route('/data_post', methods=['GET', 'POST'])
def data_post():
    rows, select = loadSession(form=form)
    session['rows'] = rows
    return redirect(url_for('results'))

@app.route('/results', methods=['GET','POST'])
def results():
    rows = session.get('rows', None)
    return render_template('data_display.html', rows=rows)

data_display.html

<div class="data_display" id="ajax">
    <table>
        <tr>
            <th>ID</th>
            <th>ICAO ID</th>
            <th>State</th>
            <th>Station Name</th>
            <th>Local Time</th>
            <th>Temp</th>
            <th>Dew Point</th>
            <th>Wind Speed</th>
            <th>Wind Direction</th>
            <th>Wind Gust</th>
            <th>Variable Wind</th>
        </tr>
        {% for row in rows %}
        <tr>
            <td>{{ row['stationID'] }}</td>
            <td><a href="{{ url_for('stations', stationID = row['id']) }}">{{ row['id'] }}</td>
            <td><a href="{{ url_for('state', state = row['state']) }}">{{ row['state'] }}</td>
            <td>{{ row['name'] }}</td>
            <td>{{ row['ldatetime'] }}</td>
            <td>{{ row['temp'] }}</td>
            <td>{{ row['dew'] }}</td>
            <td>{{ row['wspd'] }}</td>
            <td>{{ row['wdir'] }}</td>
            <td>{{ row['wgust'] }}</td>
            <td>{{ row['vrb'] }}</td>
        </tr>
        {% endfor %}
    </table>
</div>

Answer 1

我会编辑回答你的问题（如果你觉得我没有回答），但我需要知道（因为它有点模糊）你是否想要刷新前端或后端。我不知道如何帮助你做后端，但是做前端。

首先，你需要加载jquery

<script>src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

然后在包含您的表的div之后添加另一个java脚本块

<script>
    setInterval(function()
    {
    $('#ajax').load(document.URL +  ' #ajax');
    }, 1000)

</script>

在这种情况下，我制作了一个脚本块，只重新加载你的表格div 每1秒或1000毫秒。我使用你提供的div id（＆＃39; ajax＆＃39;）让它重新加载你的div（谢谢你，它节省了很多时间）。 PS，你将无法滚动表格，但如果表格很长，则必须滚动整个页面。为了解决这个问题，你可以使用iframe，但我不知道你是否想这样做（下面的评论，所以我可以给你代码）。

使用Python的Flask微框架使用AJAX刷新表格内容

1 个答案: