超详细教程-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>

超详细教程-Django实现Ajax局部刷新相关推荐

超详细教程-Django使用邮箱发送验证码
效果展示图1 图2 图3 图4 实现逻辑: 前端验证邮箱输入框内是否是邮箱地址 (若不是弹出提示框,否则下一步) 后端获取邮箱地址,生成验证码发送至对应邮箱, (若发送失败弹出提示框,否则下一步 ...
JQuery 再谈ajax局部刷新
JQuery 再谈ajax局部刷新. 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击 ...
ajax提交成功后局部刷新 jq_JQuery ajax局部刷新实例
在我们开发的时候,我们回时常用到javascript实现页面局部刷新,本文我们就和大家分享JQuery ajax局部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下案例: 描述: 1. 点击登 ...
极验验证码破解—超详细教程（一）
极验验证码破解-超详细教程(一) Gayhub:FanhuaandLuomu/geetest_break 2017.8.21 代码以上传,可供参考目录一.网站http://www.gsxt.gov ...
极验验证码破解—超详细教程（三）
极验验证码破解-超详细教程(三) Gayhub:FanhuaandLuomu/geetest_brek [国家企业信用信息公示系统为例] 目录一.网站http://www.gsxt.gov.cn滑动 ...
ajax 刷新output,JSF生命周期及AJAX局部刷新
这些时间可能一直得搞JSF...... 呵呵,这个星期天再一次的仔细的研究了一下这个所谓的6个生命周期的运行情况以及所谓的AJAX局部刷新的问题. 看了core JSF里详细描述的JSF的生命周期,基 ...
10分钟教你用python打造贪吃蛇超详细教程
更多精彩尽在微信公众号[程序猿声] 10分钟教你用python打造贪吃蛇超详细教程在家闲着没妹子约, 刚好最近又学了一下python,听说pygame挺好玩的.今天就在家研究一下, 弄了个贪吃蛇出来 ...
d3.js画柱状图超详细教程
d3.js画柱状图超详细教程完整代码下载链接:https://download.csdn.net/download/qq5q13638/85248934,直接用这个文件夹内打开即可. 下面是完整教程 ...
大疆无人机空三建模干货分享(大疆智图集群建模超详细教程)
Part 01 大疆无人机空三建模干货分享(大疆智图集群建模超详细教程) 大疆智图集群简介大疆在今年5月推出的智图3.0.0及以上版本中加入了集群功能,有集群版许可的用户可以使用此功能.智图集群是由 ...

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

效果展示：

实现逻辑：

相关代码：

超详细教程-Django实现Ajax局部刷新相关推荐

最新文章

热门文章