Flask：使用AJAX

Question

我想使用ajax发布帖子请求。我想使用输入值作为函数参数，并将函数return附加到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