Javascript 我想结合jQuery、AJAX和Flask，但我可以'；无法从服务器获取在模板上写入的响应

我正在设计一个表单，以便在基于Flask的数据库应用程序中创建族。基本上，用户可以在数据库中搜索客户机，搜索结果的每一行都有一个“添加”按钮。当用户单击按钮时，客户端将显示在表单顶部的列表中。添加所有客户端后，用户可以单击另一个按钮来创建族并将更改提交到数据库

我成功地将“add”按钮链接到AJAX请求，每当我单击它时，我都可以在控制台输出上看到它（带有正确的信息），但我始终无法弄清楚如何从服务器返回所有必要的数据并将其写入模板

我已经在下面包含了相关代码。我感觉这个错误在我的路由函数中的某个地方，但是由于我对AJAX、jQuery和JavaScript还不熟悉，所以我很难准确地说出到底出了什么问题。请派人来帮忙

routes.py

---

这里有几个问题。首先，当我刷新页面时，我并没有刷新javascript。通过硬复位（Shift+F5），我能够解决一些其他问题

其次，当我试图在页面底部而不是顶部添加表中的一行时，我试图使用一个不必要的ajax请求。这一步只需jQuery即可完成

$（document）.on（“单击“，”.addBtn“，函数（））{
var tr=$（this.close（'tr'）.clone（）；
tr.find（“输入”）.attr（“类”、“rmBtn”）；
tr.find（“输入”）.attr（“值”、“从族中删除”）；
$（“.familyView”）。追加（tr）；
});

第三，我必须重写

routes.py

中的函数，以更改我的方法中的一些内容。我更改了它，以便使用AJAX和jQuery显示搜索结果，这样页面就不必在每次进行新搜索时刷新

@app.route（'/create_family'，methods=['GET'，'POST']）
def create_family（）：
prefill={'created'u by'：当前用户.id}
表单=CreateFamily（数据=预填充）
if（request.method=='GET'）和request.args.GET（'client_id'）：
ids=request.args.get（'client_id'）.split（'，'））
打印（'id:{}'。格式（id），文件=sys.stderr）
program=request.args.get（'program'）
如果len（ids）！=0:
新族=族（程序id=程序，
已创建\u date=datetime.utcnow（），
创建人=当前用户id）
db.session.add（新的_族）
db.session.flush（）
fam_id=新的_family.id
对于ID中的cid：
新成员=家庭成员（家庭id=家庭id，客户id=cid）
db.session.add（新成员）
数据={'message'：'Family{}在{}创建。格式（fam_id，new_Family.created_date），'code'：'SUCCESS'}
db.session.commit（）
返回make_响应（jsonify（数据），201）
elif len（ids）==0：
打印（'这是一个错误'，文件=sys.stderr）
数据={'message'：'无法创建没有成员的族'，'code'：'ERROR'}
返回make_响应（jsonify（数据），401）
返回呈现模板（'create\u family.html'，form=form，client=client）

---

我知道这并不是我所修复问题的最佳解释，但现在我已经离开最初的问题几天了，我不记得到底是什么给我带来了最大的麻烦

这里有几个问题。首先，当我刷新页面时，我并没有刷新javascript。通过硬复位（Shift+F5），我能够解决一些其他问题

其次，当我试图在页面底部而不是顶部添加表中的一行时，我试图使用一个不必要的ajax请求。这一步只需jQuery即可完成

$（document）.on（“单击“，”.addBtn“，函数（））{
var tr=$（this.close（'tr'）.clone（）；
tr.find（“输入”）.attr（“类”、“rmBtn”）；
tr.find（“输入”）.attr（“值”、“从族中删除”）；
$（“.familyView”）。追加（tr）；
});

第三，我必须重写

routes.py

中的函数，以更改我的方法中的一些内容。我更改了它，以便使用AJAX和jQuery显示搜索结果，这样页面就不必在每次进行新搜索时刷新

@app.route（'/create_family'，methods=['GET'，'POST']）
def create_family（）：
prefill={'created'u by'：当前用户.id}
表单=CreateFamily（数据=预填充）
if（request.method=='GET'）和request.args.GET（'client_id'）：
ids=request.args.get（'client_id'）.split（'，'））
打印（'id:{}'。格式（id），文件=sys.stderr）
program=request.args.get（'program'）
如果len（ids）！=0:
新族=族（程序id=程序，
已创建\u date=datetime.utcnow（），
创建人=当前用户id）
db.session.add（新的_族）
db.session.flush（）
fam_id=新的_family.id
对于ID中的cid：
新成员=家庭成员（家庭id=家庭id，客户id=cid）
db.session.add（新成员）
数据={'message'：'Family{}在{}创建。格式（fam_id，new_Family.created_date），'code'：'SUCCESS'}
db.session.commit（）
返回make_响应（jsonify（数据），201）
elif len（ids）==0：
打印（'这是一个错误'，文件=sys.stderr）
数据={'message'：'无法创建没有成员的族'，'code'：'ERROR'}
返回make_响应（jsonify（数据），401）
返回呈现模板（'create\u family.html'，form=form，client=client）

我知道这并不是我修正的最好的解释，但是现在我已经离开了最初的问题几天了

@app.route('/create_family', methods = ['GET','POST'])
def create_family():
    prefill = {'created_by':current_user.id}
    form = CreateFamily(data = prefill)
    # This if block handles the client search
    if form.validate_on_submit():
        clients = Client.query
        if form.first_name.data:
            clients = clients.filter(Client.first_name.like('%{}%'.format(form.first_name.data)))
        if form.last_name.data:
            clients = clients.filter(Client.last_name.like('%{}%'.format(form.last_name.data)))
        return render_template('create_family.html', form = form, clients = clients.all())
    # Logic for the AJAX 'GET' request
    elif request.method == 'GET':
        if request.args.get('clientID'):
            clientid = request.args.get('clientID')

            # Queries DB for client information
            client = Client.query.filter(Client.id == clientid).first()

            # HTML to insert to the family table in the form
            row = '<tr><td>{}</td><td>{}</td><td>{}</td><td>{}</td><td>{}</td></tr>'.format(client.id,client.first_name,client.last_name,client.gen.gender,client.dob.strftime('%m-%d-%Y'))

            # I'm not sure if this is right, or how I should change it
            return jsonify(result=row)
    else:
        return render_template('create_family.html', form = form)
return render_template('create_family.html', form = form)

<html>
    <head>
      <link rel="stylesheet" href="{{ url_for('static', filename = 'styles/main.css') }}">
      <script src="{{url_for('static', filename='javascriptfile.js')}}"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
<body>

<!-- I omitted some of the template for brevity -->

<!-- This is the table I want to add to-->
<table class="familyView">
        <tr class="familyHeader">
            <th>Client ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Gender</th>
            <th>Date of Birth</th>
        </tr>
    </table>


<!-- I omitted some of the template for brevity -->

<!-- This is the table I want to add to-->
<form action="" method="post"><br>
{% if clients %}
    <table class="clientView">
    <tr>
        <th>Client ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Gender</th>
        <th>Date of Birth</th>
    </tr>
    {% for c in clients %}
    <tr>
        <td class="clientID">{{ c.id }}</td>
        <td>{{ c.first_name }}</td>
        <td>{{ c.last_name }}</td>
        <td>{{ c.gen.gender }}</td>
        <td>{{ c.dob.strftime('%m-%d-%Y') }}</td>
        <td><button class="addBtn" type ="button">Add</button></td>
    </tr>
    {% endfor%}
</table>
</form>
{% endif %}

window.onload=function(){

$(".addBtn").click(function() {
    var $recordToAdd = jQuery(this).closest('tr').find('.clientID').text();
    console.log("clientid: " + $recordToAdd);

    $.ajax({
        cache: false,
        url: 'create_family',
        type: 'GET',
        data: {'clientID': $recordToAdd,},
        success: function(response) {
            console.log(response);
        },
        error: function(error){
            console.log(error);
        }
    })
});

}