python Flask 中ajax向后端发送数据的个人心得

122 阅读 0 评论 81 点赞

我是靠谱客的博主多情路人，这篇文章主要介绍python Flask 中ajax向后端发送数据的个人心得，现在分享给大家，希望可以做个参考。

1 基础的样式

1.1 post

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  $.ajax({
            url:'/user/news_release',
            type:'POST',
            data:JSON.stringify(params),
            contentType:'application/json',
            headers: {'X-CSRFToken': getCookie("csrf_token")},
            success:function (response) {
                if (response.errno==200){
                    alert('ok');
                    location.reload()
                }else{
                    alert(response.errmsg)
                }
            }
        })

get

这样写的话，参数需要拼接在url中

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
        url:'/logout',
        type:'get',
        contentType: 'application/json',
        success:function (response) {
            if (response.errno == 200){
                alert(response.errmsg)
                location.reload()
            }else(
                alert('退出失败')
            )
        }
    })

这样写的话，可以将参数自动拼接在URL中

复制代码

1
2
3
4
5
6
7
8
9
    $.ajax({
        url:'/newslist',
        type:'get',
        data:params,
        success:function (response) {
           
        }
    })

也可以使用简化的写法,参数也会拼接到url中

复制代码

1
2
3
4
5
6
7
8
     $.get('/newslist',params,function (response) {
           data_querying = false;
           if (response.errno=200) {
           				pass
           }	
    })
}

若是在前端想向后端传输文件，例如照片，文件之类的，传统的ajax不可以传输图片，需要用到ajaxsubmit，这样ajax会自动将前端form表单里面有name属性的input，全部传到后端，后端也用name获取value

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
   $(this).ajaxSubmit({
            // 读取富文本编辑器里面的文本信息

            url: "/user/news_release",
            type: "POST",
            headers: {
                "X-CSRFToken": getCookie('csrf_token')
            },
            success: function (resp) {
                if (resp.errno == 200) {
                    // 选中索引为6的左边单菜单
                    window.parent.fnChangeMenu(6);
                    // 滚动到顶部
                    window.parent.scrollTo(0, 0)
                }else {
                    alert(resp.errmsg)
                }
            }
        })