超详细教程-Django实现Ajax局部刷新

效果展示：

右侧div块展示博客详情
右侧div块展示新建博客

右侧div块展示新建博客

实现逻辑：

在一个DIV块展示不同的功能模块（查看博客，编辑博客，新建博客）

• 前端发起Ajax请求
• 后端使用render函数返回请求获取的内容
• 前端接收render的HTML模板渲染后的HTML内容，并将其展现在特定区域（div）块

相关代码：

HTML：

<div class="blog-detail" id="blog_detail"></div>

JS：

 function add_blog_div(){
            $.ajax({
                type:"GET",
                url:"/blog/add",
                dataType: "html",
                date:{
                    csrfmiddlewaretoken:'{{ csrf_token }}'
                },
                success:function(result){
                    $("#blog_detail").html(result);
                }
            });
        }
    

Python：（PS：最终div块展示的是add.html渲染后的内容）

def add(request):
    if request.method == "GET":
        author_id = request.session['member']['id']
        categories = Category.objects.all().filter(author_id=author_id)
        tags = Tag.objects.all().filter(author_id=author_id)
        return render(request, 'blog/add.html', {'categories': categories,"tags":tags})
    

add.html(不用写头部等内容，直接把这个HTML文件当做div块内的内容)

<form class="form-horizontal"  style="margin-top:5px" >
        {% csrf_token %}
        <div class="form-group">
            <label for="title" class="col-md-1 control-label">标题:</label>
            <div class="col-md-7">
                <input type="text" name="title" id="title" class="form-control"  placeholder="文章标题">
            </div>
            <input id='edit_tagss' type="button" class="btn btn-default" value="设置专栏与标签">
        </div>
        <div class="form-group">
            <div class="col-md-12">
               <div id="vditor" class="vditor"></div>
            </div>
        </div>
    </form>