python中前后端通信方法Ajax和ORM映射（form表单提交）

后端从数据库获取数据给到前端：

第一种方式：

admin.py文件代码：

@admin.route('/showList')
def show():
    # 获取数据库所有文章数据，得到一个个对象
    res=Article.query.all()
    dicts=[]
    # 将每一个对象转成字典并加入一个列表，再用jinja模板将数据渲染到视图html中
    for item in res:
        dicts.append(item.__dict__)
    print('读取所有内容',dicts)
    print('每一个字段的值',dicts[]['title'])

    # 将数据dicts=dicts传到articleList.html页面渲染
    return render_template('admin/articleList.html',dicts=dicts)

前端利用jinja语法渲染：

    <!--该内容使用了jinja模板-->
                                    <div id="top">
                                            {%for item in dicts%}
                                    <!--<form id="form1" method='POST' enctype="multipart/form-data" action="url">-->

                                             <hr/>

                                                 <h3 class="zuo">作者:</h3>
                                                <p class="biao">{{item['author']}}</p>
                                                <p class="lei">文章分类:{{item['category']}}</p>
                                                <p class="shi">文章发布时间:{{item['put_date']}}</p>
                                                <p class="nei">文章内容:{{item['content']}}</p>

                                            <button   class="authorList" id="{{item.id}}" >编辑</button>
                                                <!--这里的data-id是设置的标签数学，在点击不同的item时获取它的id值，下面讲解在js里用到-->
                                            <button data-id="{{item.id}}" onclick="del(event)" type="submit" class="delete">删除</button>

                                            <hr style="border:1rem;border-bottom-color: black"/>

                                    <!--</form>-->
                                            {% endfor %}
                                         </div>

在点击修改文章时需要知道具体是哪偏文章需要修改所以在上面用data-id将每篇文章的id保存到设置属性dataset里

在js里直接设置路由，根据相应路由程序会执行相应的py文件下路由的函数方法：

    function del(e){
                console.log('删除',e)
                //获取表单设置好的data—id值
                value = e.target.dataset.id
                //本地路由定向
                location.href='/admin/delArticle/'+ value

                // console.log('/admin/delArticle/'+ value)
                //  $('form1').attr('action','/admin/delArticle/'+ value)
            }

相应路由下的py方法：

# 此处使用动态路由的方式接收前端传来的id，根据相应的id删除相应的文章
@admin.route('/delArticle/<delid>',methods=['GET','POST'])
def delArticle(delid):
    print('',delid)
    delAr=Article.query.filter(Article.id==delid).first()
    db.session.delete(delAr)
    db.session.commit()

    return render_template('admin/addArticle.html')

第二种ajax请求方式：

利用ajax传递前端请求的数据并返回数据给到前端：

js代码：

//被点击的标签对象$('.authorList')
            $('.authorList').click(function() {
                //获取当前点击对象标签上的属性id值

                var ID = $(this).attr('id')

                data = {'Articleid': ID}
                console.log(data)
                 $.ajax({
                    // ajax请求的路由地址（py文件下的路由下有方法）
                    url: '/admin/editArticle',
                    // 向后端请求类型（是一个对象格式）
                    type: 'post',
                    // 向后端发送请求的数据
                    data: data,
                    // 请求成功后后端返回回来的数据，后端对数据json.dumps(data)
                    success: function (res) {
                        // 后端对数据json.dumps(data)data是一个对象类型才能dumps，所以在此要对数据进行解析
                        resData=JSON.parse(res)
                        console.log(resData)
                        //将获取到的数据渲染到相应的标签里
                        $('#title').val(resData.title)
                        $('#category').val(resData.category)
                        $('#author').val(resData.author)
                        $('#editText')[].innerHTML=(resData.content)
                    }
                   })
                $('#edit')[].style.display='block '
                $('#top')[].style.display='none '
                $('#top')[].style.opacity='0 !important'

            })

后端py文件下的方法接收到数据返回数据：

@admin.route('/editArticle',methods=['post','get'])
def editArticle():
    # 定义一个全局共用变量id（因为下面else里要用到）
    global A_id
    print('bianjie',len(request.form))
    # 前端点击编辑时传入的是一个id值所以长度为1，这是将所有文章内容原样渲染到编辑页面，得返回所有文章内容
    if len(request.form)<:

        A_id= request.form['Articleid']
        print('获取前端post请求数据id',request.form['Articleid'])
        resEdit=Article.query.filter(Article.id==int(request.form['Articleid'])).first()
        data={
            'title':resEdit.title,
            'author':resEdit.author,
            'content':resEdit.content,
            'category':resEdit.category,
            'files':resEdit.files
        }
        # data是一个对象类型才能dumps
        # print(resEdit.title)
        return json.dumps(data)

    # 否则提交回来的就是修改文章后的内容长度大于1，执行修改相应数据库的内容
    else:

        print('修改文章', request.form)
        edit=Article.query.filter(Article.id== A_id).first()
        edit.title=request.form['title']
        edit.content = request.form['content']
        edit.category = request.form['category']
        edit.files = request.form['files']
        edit.author = request.form['author']
        edit.edit_time =datetime.now()
        db.session.commit()
        print('修改文章')
        # return redirect('/showList')
        return '完成修改'

前后端交互还有form 表单提交post或者get传递信息给后端相对较简单，在此不多加描述

哎，还是说一下：在这里method='post' enctype="multipart/form-data"必须写method方法可以是post也可以是get，action是表单提交到后端的具体路由，

在该路由下py执行的具体方法

<form role="form" action='/admin/addArticle' method='post' enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label>文章标题</label>
                                        <input type="text" placeholder="请输入文章标题" name="title" class="form-control">
                                    </div>

                                </form>

后端接收表单信息：

@add_article.route('/',methods=['POST','GET'])
# 添加文章
def addArticle():

    return render_template('admin/form_basic.html')

@add_article.route('/add',methods=['POST','GET'])
def add():

    # print(request.method)
    if request.method=='GET':
        print('运行到此处1')
        return render_template('admin/form_basic.html')
    else:
        # 获取用户名，然后再根据用户名获取用户id
        # 获取session
        print('运行到此处2')
        # 获取表单图片文件的方法
        img = request.files
        print('图片',img)
        img = img['cover_img']
        # print(img.filename)
        if img !=None :
            # 获取图片名字
            img_name=img.filename
            # 保存图片到本地
            img.save('./static/images/{}'.format(img_name))
            cover_img = './static/images/{}'.format(img_name)
        else:
            cover_img = 'http://bpic.588ku.com/back_pic/04/54/42/0658634373900c4.jpg'

        # 获取用户账号
        username = session.get('user_name')

        if username != None:
            check = User.query.filter(User.user_name == username).first()
            userid = check.id
            print('用户id', userid)
        else:
            username = '失心哥'
            check = User.query.filter(User.user_name == username).first()
            userid = check.id
        #     print('出错了，该用户不存在')
            # return '出错了，该用户不存在'
        # 获取表单提交里面的name为title的值
        title = request.form['title']

        type = request.form['type']
        author = request.form['author']
        content = request.form['content']
        times = datetime.now()
        # 添加文章,foreign_user=userid
        addInfo=Article(title=title,cover_img=cover_img,type=type,author=author,content=content,time=times,state=,foreign_user=userid)
        db.session.add(addInfo)
        db.session.commit()
        return render_template('admin/form_basic.html')
        # return '成功增加文章'