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

灰太狼 2022-01-25 16:21 275阅读 0赞

### 1 基础的样式 ###

##### 1.1 post #####

$.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中

$.ajax({
            url:'/logout',
            type:'get',
            contentType: 'application/json',
            success:function (response) {
                if (response.errno == 200){
                    alert(response.errmsg)
                    location.reload()
                }else(
                    alert('退出失败')
                )
            }
        })

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

$.ajax({
            url:'/newslist',
            type:'get',
            data:params,
            success:function (response) {
               
            }
        })

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

$.get('/newslist',params,function (response) {
               data_querying = false;
               if (response.errno=200) {
               				pass
               }	
        })
    }

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

$(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)
                    }
                }
            })