Flask:使用 AJAX 的 POST 请求

莫瑞斯

我想通过使用 ajax 发出帖子请求。我想使用输入值作为函数参数并将函数返回附加到 html 表中。我不知道,但我认为我的代码是错误的并且 ajax 不起作用。

注意:为了测试,我正在获取输入值并返回到 html 页面。

网络.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.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.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='')

网络.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>
丹尼尔·达·罗查

你必须返回 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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Laravel AJAX POST请求为空

来自分类Dev

如何使用Symfony和Jquery进行POST Ajax请求

来自分类Dev

AJAX在POST请求后读取ETag

来自分类Dev

使用Jquery进行AJAX POST请求时的不同行为

来自分类Dev

清理AJAX请求中的POST数据

来自分类Dev

$ .ajax POST请求中的对象属性丢失

来自分类Dev

在POST请求中使用POST

来自分类Dev

严格遵循分页AJAX请求-POST

来自分类Dev

如何使用Java模拟$ .ajax数组POST请求

来自分类Dev

AJAX POST请求中的HTTP错误400

来自分类Dev

POST Ajax请求

来自分类Dev

Ajax Post请求不起作用?

来自分类Dev

Ajax POST请求不起作用

来自分类Dev

请求参数中的Ajax POST数据

来自分类Dev

尝试使用Java脚本从FLASK API请求数据(POST)

来自分类Dev

使用flask-restless关系的POST请求错误

来自分类Dev

laravel ajax方法:'post'但它使用get发送HTTP请求

来自分类Dev

Flask Restless的Ajax POST请求问题

来自分类Dev

Laravel 5:使用 Ajax Post 请求时请求数据为空

来自分类Dev

POST 400错误,ajax请求

来自分类Dev

Transcrypt:如何使用 Python/Flask 发送 ajax POST 请求以启动服务器端作业

来自分类Dev

未使用 ajax 请求设置 Flask cookie

来自分类Dev

无法 POST ajax 请求

来自分类Dev

如何使用ajax post请求将模态值插入db?

来自分类Dev

从 Ajax POST 请求创建数组

来自分类Dev

Spotify Api Ajax Post 请求以使用“ajax-request”节点包获取令牌

来自分类Dev

Laravel 中的 AJAX POST 请求

来自分类Dev

Ajax:POST 请求的空参数

来自分类Dev

使用 AJAX 发送 POST 请求,被 Burp Suite 拦截