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

最新推荐文章于 2024-09-26 22:12:23 发布

撸码狂魔吖

最新推荐文章于 2024-09-26 22:12:23 发布

阅读量1.4w

点赞数 1

CC 4.0 BY-SA版权

文章标签： python flask ajax ajaxsubmit

本文链接：https://blog.youkuaiyun.com/wjg1314521/article/details/90697286

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