Flask：使用 AJAX 的 POST 请求

Question

我想使用 ajax 发出一个 post 请求。我想使用 输入值 作为函数参数并将函数返回附加到 html 表中。我不知道，但我认为我的代码错误并且 ajax 无法正常工作。

注意：为了测试，我将输入值返回到 html 页面。

network.html

    <script type="text/javascript">
       $(function(){
         $('#button').click(function(){
            var dados = $('#search-input').val();
            $.ajax({
                url: '/network',
                data: $('form').serialize(),
                type: 'POST',
                success: function(data){
                    $('#result').append(data)
                    console.log(data);
                },
                error: function(error){
                    console.log(error);
                }   
            });
         });
       });
     </script>

     <form name='form' method="POST">
                <input type="text" name="search-input" id="search-input" class="form-control" placeholder="Users and ID" >   
<button type="submit" class="btn btn-primary" id="button">Search</button>
            </form>
            <span id=result>{% print dado %}</span>

app.py

@app.route('/network',methods=['POST','GET'])
def network():
    if request.method == 'POST':
     input = request.form['search-input']       
     return render_template('network.html',dado=input)
    else:
      return render_template('network.html',dado='')

编辑：更新后返回的是 JSON 格式

{
  "dado": "INPUT VALUE"
}

app.py

@app.route('/network',methods=['POST','GET'])
def network():
    if request.method == 'POST':
     input = request.form['search-input']       
     return jsonify(dado=input)
    else:
      return render_template('network.html',dado='')

network.html

  <script type="text/javascript">
   $(function(){
     $('#botao').click(function(){
        var dados = $('#search-input').val();
        $.ajax({
            url: "{{ url_for('network') }}",
            data: JSON.stringify(dados),
            contentType: 'application/json;charset=UTF-8',
            type: 'POST',
            success: function(data){
                $('#result').append(data["dado"])
                console.log(data);
            },
            error: function(error){
                console.log(error);
            }   
        });
     });
   });
 </script>

Answer 1

你必须返回 JSON！ 代替return render_template(...)，使用：

return jsonify(dado = input)

然后在你的 ajax 成功调用中：

success: function(data){
    $('#result').append(data["dado"])
    console.log(data);
}
...
}); // end AJAX
e.preventDefault();

别忘了导入 jsonify

from flask import jsonify