Question

作为jquery / AJAX和flask的新手，我一直很难解决这个问题。

我的app.py将基于用户输入对PostgreSQL数据库进行搜索，然后将结果返回到模板中的表中。

之所以需要AJAX，是因为表单字段的数量过多，如果我忘记选择或添加更多选项以将搜索范围缩小到一个范围，我不想在其中重新输入信息。结果很少。

然后我试图做的就是将所有这些信息都以JSON的形式返回，但是我无法做到这一点-只是将其喷出在自己的页面上，而我努力地使这可用于我的jinja2模板。

借助event.preventDefault()，我现在已经设法将此信息反馈回jinja2模板，并且当我加载搜索页面时，现在可以在控制台中看到此信息。

我现在的问题是我可以将信息从生成的JSON数组返回到模板，这是错误的。我可以使它选择数组中的第一项，但它不会处理我的搜索查询（它是在将它们吐到浏览器中时执行的），并且它并没有真正整齐地附加到表中，连续搜索只是增加了{{ 1}}标签，但不符合我的表格布局。

我需要做的是运行查询并为JSON提供搜索结果，然后将其正确返回到我的html模板中。

我已经尝试了一段时间了，希望能获得任何帮助。

我的app.py

<td>

我的ajax.js文件

from flask import request, jsonify
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_bootstrap import Bootstrap
from flask import render_template
from sqlalchemy import create_engine
from flask_marshmallow import Marshmallow
import json

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI']='postgresql://postgres:test@localhost/postgres'
engine = create_engine('postgresql+psycopg2://postgres:test@localhost/postgres')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

app.debug = True
app.config['SQLALCHEMY_ECHO'] = True
db=SQLAlchemy(app)
Bootstrap(app)
ma=Marshmallow(app)
# classes

class Sdctest(db.Model):
    startchass= db.Column (db.Text, primary_key=True)
    cusname= db.Column (db.Text)
    chassistype1= db.Column (db.Text)
    axleqty= db.Column (db.Integer)
    tyres= db.Column (db.Text)
    extlength= db.Column (db.Text)
    neck= db.Column (db.Text)
    stepheight= db.Column (db.Text)
    reardeckheight= db.Column (db.Text)
    siderave= db.Column (db.Text)
    steer= db.Column (db.Text)
    sockets= db.Column (db.Text)
    containerstwistlock= db.Column (db.Text)
    headboard= db.Column (db.Text)





class TableSchema(ma.Schema):
    class Meta:
        fields = ('startchass', 'cusname', 'chassistype1', 'axleqty', 'tyres', 'extlength', 'neck', 'stepheight', 'reardeckheight', 'siderave', 'steer', 'sockets', 'containerstwistlock', 'headboard')
tables = TableSchema()
tabless = TableSchema(many=True)

#routes
@app.route('/')

def index():

        return render_template('index.html')

@app.route('/platform', methods=['GET'])
def platform():
        return render_template('platform.html')

@app.route ('/search', methods=['POST', 'GET'])
def search():
    options = db.session.query(Sdctest.chassistype1).distinct().all()
    axleopts = db.session.query(Sdctest.axleqty).distinct().all()
    # enables passing user input to the variable
    # query parameters and their corresponding database columns
    param_columns = {
        "startchass": "startchass",
        "cusname": "cusname",
        "chassistype1": "chassistype1",
        "axleqty": "axleqty",
        "tyres": "tyres",
        "siderave": "siderave",
        "steer": "steer",
        "sockets": "sockets",
        "containerstwistlock": "containerstwistlock",
        "headboard": "headboard",

    }
    param_column2 = {
        "startchass": "startchass",
        "extlength": "extlength",
        "neck": "neck",
        "stepheight": "stepheight",
        "reardeckheight": "reardeckheight",

    }
    # Get all of the column filters where the parameters aren't empty

    filters = {
        column: request.form[param]
        for param, column in param_columns.items()
        if request.form.get(param, "") != ""
    }
    filters2 = {
        column: request.form[param]
        for param, column in param_column2.items()
        if request.form.get(param, "") != ""
    }
    # filter most columns using fuzzy match
    query = Sdctest.query
    for column, value in filters.items():
        query = query.filter(getattr(Sdctest, column).ilike(f'%{value}%')).order_by(Sdctest.startchass.desc())
    for column, value in filters2.items():
        query = query.filter(getattr(Sdctest, column).ilike(f'{value}')).order_by(Sdctest.startchass.desc())
    results2 = query.all()
    result2 = tabless.dump(results2)

    return jsonify(result2)

if __name__ == "__main__":
    app.run()

最后是我的模板html（将其粘贴到其他位置，因为它有点大）

https://paste.pound-python.org/show/d6Zm37ivTOnphW7lHcaj/

Answer 1

我对此很困惑。

但是，我看到您正在使用jinja模板以及AJAX填充表。您只需要一个，或者至少两个都不起作用，有两个原因。

我看不到像这样在jinja模板上添加结果的任何代码

return render_template('platform.html', result2=result2)

对于您粘贴的html中的此代码块，

{% for item in result2 %}
<tr>
<td>{{ item.startchass }}</td><td>{{ item.cusname }}</td><td>{{ item.chassistype1 }}<td>{{ item.axleqty }}</td><td>{{ item.tyres }}</td><td>{{ item.extlength }}</td><td>{{ item.neck }}</td><td>{{ item.stepheight }}</td><td>{{ item.reardeckheight }}</td><td>{{ item.siderave }}</td><td>{{ item.steer }}</td><td>{{ item.sockets }}</td><td>{{ item.containerstwistlock }}</td><td>{{ item.headboard }}</td>
</tr>
{% endfor %}

您只是将tds附加到MyTable的AJAX代码上。 82 Tuskers是正确的。正确构造HTML。

如果您要使用进阶方法，则可以在提交时向/ search请求POST请求并返回呈现的模板，其结果如原因1所示。

如果您要使用AJAX方法，请进行/ search纯粹的POST并从后端接收json文件，并为它们附加适当的html结构。您将不再需要原因1中的代码块，因为它首先应该是一个空表。

希望这可以提供见解。

在Flask模板中显示JSON数组

1 个答案: